展开/折叠 jQuery 菜单 - 选择器答案

【问题标题】：Expand/Collapse jQuery menu - selectors展开/折叠 jQuery 菜单 - 选择器
【发布时间】：2015-10-13 01:16:13
【问题描述】：

我，正在尝试构建一个展开/折叠菜单。

我有一个主导航栏，里面有 3 个子菜单。默认情况下，子菜单的高度为 50 像素 - 但一旦单击，此高度将变为 200 像素。再次单击它，使其折叠回原来的 50px。

困扰我的是，当我展开 subMenu1 时，我又展开 subMenu2 - subMenu1 保持展开状态，我希望它在选择第二个子菜单时折叠。

这是我的代码；

<!DOCTYPE html>
<html>
<head>
    <title>projectFive</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>




    </div>
</div>
<div class="sideMenu">

    <div class="sideButton">&#9776;</div>
    <div class="profilePic"></div>

    <div class="menuButtonHolder">


        <div class="menuButton">
            <a class="menuButtonIcon" href="#"><img src="./img/rightArrow.png" id="arrow" alt=""><span>link</span></a>
            <div class="subMenu"></div>
        </div><!--  ending toggle button -->


    <div class="menuButton">
            <a class="menuButtonIcon" href="#"><img src="./img/rightArrow.png" id="arrow" alt=""><span>link</span></a>
            <div class="subMenu"></div>
        </div><!--  ending toggle button -->


    <div class="menuButton">
            <a class="menuButtonIcon" href="#"><img src="./img/rightArrow.png" id="arrow" alt=""><span>link</span></a>
            <div class="subMenu"></div>
        </div><!--  ending toggle button -->


    </div> <!-- ending menu button holder -->

</div>
<!-- ending side menu
 -->


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="my.js" type="text/javascript"></script>
</body>
</html>

和 jQuery：

$(document).ready(function(){


    var $menuButton = $(".sideButton");
    var $menuBar = $(".sideMenu");
    var $profilePic = $(".profilePic");

    $menuButton.click(function(){
        if ($(this).hasClass("active")){

            $profilePic.fadeOut(200);
            $profilePic.css({"width": "25px", "height": "25px", "transition": "width 0.3s linear, height 0.3s linear"}, 500);

            $(".menuButtonHolder").css({
                "top": "1000px", 
                "transition": "top .4s ease-out"});

            $menuBar.animate({width: "60px"}, 500);
            $menuBar.css({"background-color": "rgba(0,0,0,0.9)"});
            $menuButton.removeClass("active");



        } else {

            $profilePic.fadeIn(500);
            $profilePic.css({"width": "150px", "height": "150px", "transition": "width 0.7s linear, height 0.7s linear"}, 500);

            $(".menuButtonHolder").css({
                "top": "0px", 
                "transition": "top .8s ease-out"});

            $menuBar.animate({width: "300px"}, 800);
            $menuBar.css({"background-color": "rgba(0,0,0,0.5)", "transition": "background-color .5s linear"});
            $menuButton.addClass("active");
        }


});


$(".menuButtonIcon").click(function(){


        if ($(this).hasClass("filter")){

            $(this).find("#arrow").css({"-webkit-transform": "rotate(90deg)", "transition": "transform 0.5s ease-out"});
            $(this).css({"height": "50px", "transition": "height 0.5s ease-out"});
            $(this).removeClass("filter");





        } else {
            $(this).find("#arrow").css({"-webkit-transform": "rotate(180deg)", "transition": "transform 0.5s ease-out"});
            $(this).css({"height": "200px", "transition": "height 0.5s ease-out"});
            $(".menuButtonIcon").addClass("filter");
        }


});


});

我想知道使用什么功能或使用什么来确保一旦单击任何子菜单 - 如果有一个展开，它的兄弟会崩溃。

如果有足够的信息，我希望我的代码能给你们一个想法。

提前致谢！

【问题讨论】：

标签： jquery menu selector collapse expand

【解决方案1】：

尝试将您的子菜单折叠逻辑移动到一个单独的函数中，并使用点击事件函数中的相关元素调用它，如下所示：

function collapse($elements) {
  $elements.removeClass("filter");
  $elements.find("#arrow").css({"-webkit-transform": "rotate(90deg)", "transition": "transform 0.5s ease-out"});
  $elements.css({"height": "50px", "transition": "height 0.5s ease-out"});
}

$(".menuButtonIcon").click(function(){
  if ($(this).hasClass("filter")){
    collapse($(this));
  } else {
    $(this).find("#arrow").css({"-webkit-transform": "rotate(180deg)", "transition": "transform 0.5s ease-out"});
    $(this).css({"height": "200px", "transition": "height 0.5s ease-out"});
    $(this).addClass("filter");
    collapse($(".menuButtonIcon").not($(this)));
  }
});

如果它有一个“过滤器”类，这将折叠菜单项，如果没有，则折叠所有除了单击的菜单项，但其他项目可能。

这是一个粗略的实际示例：http://codepen.io/nrbernard/pen/doqwLr

【讨论】：

感谢您的详细解释和示例。让我看看我是否做对了。您创建了一个名为“collapse”的新函数，并告诉它将高度设为标准 50 像素——然后，在单击事件代码中，只要单击 $(this) 以外的任何内容，就会触发此折叠函数。您能否详细说明一下 collapse($(".menuButtonIcon").not($(this)));工作中？ $elements 是您创建的东西还是现有的东西？
我让它在我的代码中工作 - 非常感谢。很高兴醒来并立即解决问题：P
现在的情况是，当我单击子菜单中的任何链接时，一切都会崩溃。如果单击任何子菜单子项，是否有一行代码可以使脚本忽略折叠元素？例如。我点击子菜单 1 - 它展开。我点击子菜单 2 - 它展开并且子菜单 1 折叠 - 太好了。我再次单击 subMenu one 以展开，然后单击其中一个链接位置进入此子菜单。现在我的页面滑入 - 但是菜单折叠了，而我想让它保持打开状态，直到只有子菜单本身被点击 - 而不是里面的链接。