Question

我为我的网站模板创建了一个文档，并且我尝试创建一个下拉菜单。这个想法很简单：当我点击链接名称旁边的插入符号时，如果我再次点击它的子菜单应该打开，它应该被关闭。此外，如果打开任何其他子菜单，我希望它们关闭，这样一次只能打开一个子菜单。

我的解决方案：我使用了toggleClass和for循环。

我的问题是：我添加了两个for循环后，一次只打开一个子菜单，我的toggleClass停止工作。这意味着当我点击插入符号时它打开子菜单，但再次点击插入符号，它不会关闭子菜单并保持打开状态。

以下是代码：

＆＃13;

jQuery(document).ready(function(){

  $(".indicator").on("click", showLinks);

    function showLinks(){

      var allMenus = $("#ab-menu, #str-menu, #ht-menu");
      var allCarets = $("#ab-caret, #str-caret, #ht-caret");

      for(i = 0; i < allMenus.length; i++){
        $(allMenus).eq(i).removeClass("show");
      }
      for(i = 0; i < allCarets.length; i++){
        $(allCarets).eq(i).removeClass("caret-rotate");
      }

      var linkId = $(this).attr("data-menu");
      var caretId = $(this).attr("data-caret");

      $(linkId).toggleClass("show");
      $(caretId).toggleClass("caret-rotate");

    };

});

＆＃13;

#ab-menu,
#str-menu,
#ht-menu {
  background-color: #1d3557;
  max-height: 0;
  margin: 0.2em 0;
  opacity: 0.5;
  overflow: hidden;
  transition: 0.4s ease-in-out;
}
#ab-menu.show,
#str-menu.show,
#ht-menu.show {
  max-height: 500px;
  opacity: 1;
}
.fa .fa-caret-down {
  display: block;
  color: #fff;
}
.caret-rotate {
  transition: 0.4s ease-in-out;
}
.fa-caret-down.caret-rotate {
  color: #a8dadc;
  transform: rotate(-90deg);
}

＆＃13;

<nav>
    <ul class="nav-links">
      <li class="about-panel">About <span class="fa fa-caret-down indicator" id="ab-caret" data-menu="#ab-menu" data-caret="#ab-caret"></span>
        <ul class="sub-menu about-sub-menu" id="ab-menu">
          <li class="about-links"><a href="#about">Main Features</a></li>
          <li class="about-links"><a href="#getting-started">Getting Started</a></li>
        </ul>
      </li>
    </ul>
    <ul class="nav-links">
      <li class="structure-panel">Structure <span class="fa fa-caret-down indicator" id="str-caret" data-menu="#str-menu" data-caret="#str-caret"></span>
        <ul class="sub-menu structure-sub-menu" id="str-menu">
          <li class="structure-links"><a href="#sections">Sections</a></li>
          <li class="structure-links"><a href="#grid">Bootstrap-grid</a></li>
          <li class="structure-links"><a href="#carousel">Bootstrap Carousel</a></li>
        </ul>
      </li>
    </ul>
    <ul class="nav-links">
      <li class="how-to-panel">How-to <span class="fa fa-caret-down indicator" id="ht-caret" data-menu="#ht-menu" data-caret="#ht-caret"></span>
        <ul class="sub-menu how-sub-menu" id="ht-menu">
          <li class="how-to-links"><a href="#nav">Navigation</a></li>
          <li class="how-to-links"><a href="#images">Images</a></li>
          <li class="how-to-links"><a href="#headers">Headers</a></li>
          <li class="how-to-links"><a href="#icons">Icons</a></li>
          <li class="how-to-links"><a href="#colors">Colors</a></li>
          <li class="how-to-links"><a href="#fonts">Fonts</a></li>
          <li class="how-to-links"><a href="#buttons">Buttons</a></li>
          <li class="how-to-links"><a href="#portfolio">Portfolio</a></li>
          <li class="how-to-links"><a href="#map">Map</a></li>
        </ul>
      </li>
    </ul>
    <ul class="nav-links">
      <li class="credits"><a href="#credits">Credits</a></li>
    </ul>
  </nav>

＆＃13;

Answer 1

不需要循环。您可以像这样简化代码，我认为这将解决您的问题。

var allMenus = $("#ab-menu, #str-menu, #ht-menu");
var allCarets = $("#ab-caret, #str-caret, #ht-caret");

allMenus.removeClass("show");
allCarets.removeClass("caret-rotate");

Answer 2

你的代码很接近; @ Goose的编辑可以使用，但您还需要其他的toggleClass（）代码。这对我有用：

function showLinks(){
    var allMenus = $("#ab-menu, #str-menu, #ht-menu"),
        allCarets = $("#ab-caret, #str-caret, #ht-caret"),
        linkId = $(this).attr("data-menu"),
        caretId = $(this).attr("data-caret");

    $(allMenus).not($(linkId)).removeClass("show");
    $(allCarets).not($(linkId)).removeClass("caret-rotate");

    $(linkId).toggleClass("show");
    $(caretId).toggleClass("caret-rotate");
};

Answer 3

如果没有jsfiddle /抓住所有依赖项（jQuery和font-awesome来自它的外观），很难获得准确的测试环境，但是看看你的DOM我认为你可能能够改变你的点击事件到这样的事情：

$(document).ready(function() { 
    //Create onclick events for all elements with a class of indicator
    $(".indicator").on("click", function() { 
        //Making jQuery object out of this so we can use jQuery methods
        $this = $(this);
        //Add the caret-rotate class to this
        $this.addClass('caret-rotate');

        //Use the data attribute you made to pass the ID and add a class of show
        $( $this.data("menu") ).addClass("show");

        //The siblings method is very useful here to clear out the caret-rotate classes of everything except this one
        $this.siblings().removeClass("caret-rotate");
        //Grab the siblings again and filter through their children to find the sub-menu class elements, then remove the show class from them
        $this.siblings().children(".sub-menu").removeClass("show");

        //Alternatively you could try this to compress the two lines above into one by chaining the commands, but I can't test right now. Try commenting the above two lines out and uncommenting this when you are testing:
        //$this.siblings().removeClass("caret-rotate").children(".sub-menu").removeClass("show");
    });
});

为什么我的for循环正在改变jQuery中toggleClass的行为

3 个答案: