Question

我的网站上有一个简单的菜单 - 当我点击主链接时，它会打开一个子菜单。但是，如果我点击另一个主要链接，它不会关闭原始子菜单。我该如何解决这个问题？

通过示例进行描述可能更容易 - 点击Projects然后点击More Projects：http://jsfiddle.net/oxg7e07c/

＆＃13;

$('#menu-primary-menu>li>a').click(function() {
  $(this).next().toggle();
  // if there is any other element after a the  use
  // $(this).parent().find('ul').toggle();
  // also if you need any better effect then use
  // slideToggle() or fadeToggle instead of toggle()
});

＆＃13;

#menu-primary-menu>li>ul {
  display: none
}
#menu-primary-menu {
  background-color: #eee;
  width: 200px;
}
#menu-primary-menu {
  position: relative;
}
#menu-primary-menu ul {
  width: 200px;
  background-color: red;
  position: absolute;
  margin-top: 0;
  top: 0;
  left: 250px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="menu-primary-menu-container">
  <ul id="menu-primary-menu" class="menu">
    <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-27"><a href="#">Projects</a>
      <ul>
        <li id="menu-item-26" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-26"><a href="/category/projects/residential/">Residential</a>
        </li>
        <li id="menu-item-24" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-24"><a href="/category/projects/private/">Private</a>
        </li>
      </ul>
    </li>


    <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-27"><a href="#">More Projects</a>
      <ul>
        <li id="menu-item-26" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-26"><a href="/category/projects/residential/">Residential2</a>
        </li>
        <li id="menu-item-24" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-24"><a href="/category/projects/private/">Private</a>
          <li id="menu-item-24" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-24"><a href="/category/projects/private/">Private</a>
            <li id="menu-item-24" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-24"><a href="/category/projects/private/">Private</a>
            </li>
      </ul>
      </li>

  </ul>
</div>

＆＃13;

Answer 1

打开新子菜单时，应隐藏其他菜单项。您可以通过在事件处理程序中添加以下行来使用它。

$(this) // The element that is clicked i.e. a
    .parent() // The direct parent of the clicked element i.e. li
    .siblings() // All the sibling elements
    .find('ul').hide(); // Find will search for the `ul` inside the siblings and hide it

<强>演示：

$('#menu-primary-menu>li>a').click(function() {
  $(this).parent().siblings().find('ul').hide();
  $(this).next().toggle();
});

#menu-primary-menu>li>ul {
  display: none
}
#menu-primary-menu {
  background-color: #eee;
  width: 200px;
}
#menu-primary-menu {
  position: relative;
}
#menu-primary-menu ul {
  width: 200px;
  background-color: red;
  position: absolute;
  margin-top: 0;
  top: 0;
  left: 250px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="menu-primary-menu-container">
  <ul id="menu-primary-menu" class="menu">
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-27"><a href="#">Projects</a>
      <ul>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-26"><a href="/category/projects/residential/">Residential</a>
        </li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-24"><a href="/category/projects/private/">Private</a>
        </li>
      </ul>
    </li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-27"><a href="#">More Projects</a>
      <ul>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-26"><a href="/category/projects/residential/">Residential2</a>
        </li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-24"><a href="/category/projects/private/">Private</a>
        </li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-24"><a href="/category/projects/private/">Private</a>
        </li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-24"><a href="/category/projects/private/">Private</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

DOM 中的id应该唯一。如果您希望对多个元素使用相同的行为，请使用class而不是id（您已经拥有）。我从上面的demo / snippet中删除了重复的id。
第二个子菜单中的li元素缺少结束标记。
我还建议您使用slideUp/slideDown/slideToggle或fadeIn/fadeOut/fadeToggle来实现更顺畅的动画/过渡。

动画演示： Slide Effect Fade Effect

更进一步，您还可以链接两个陈述

// http://jsfiddle.net/tusharj/neaec98t/3/
$(this) // Clicked anchor element
    .next() // Immediate next sibling
        .toggle() // Toggle the visibility
    .end() // Go back to the previous context, the context is changed when used `next()`
    .parent()
    .siblings()
        .find('ul')
        .hide();

Answer 2

$('#menu-primary-menu>li>a').click(function() {
  $("#menu-primary-menu>li>ul").not($(this).next()).hide();
  $(this).next().toggle();
  // if there is any other element after a the  use
  // $(this).parent().find('ul').toggle();
  // also if you need any better effect then use
  // slideToggle() or fadeToggle instead of toggle()
});

http://jsfiddle.net/8cwf5ogc/

或：

$('#menu-primary-menu>li>a').click(function() {
      $(this).parents("ul").find("li>ul").not($(this).next()).hide();
      $(this).next().toggle();
    });

http://jsfiddle.net/sm6b6pvr/

使用jQuery进行简单的子菜单故障

2 个答案: