Question

我是第一次与Boostrap合作，请不要杀了我：D 我的导航栏有问题。我有7个菜单，每个菜单都有自己的下拉菜单。问题是，当我点击一个菜单时，它们会同时下拉，我只需要下载我点击的那个。我的JS代码非常简陋。这就是我到目前为止所使用的：

$('.dropdown-toggle').click(function() {
    $('.dropdown-menu').toggle();
  });

HTML代码就是这样，（一个菜单的示例;每个菜单都有类似的代码）：

   <li class="dropdown">
     <a href="#" class="dropdown-toggle">Organizare <b class="caret"></b</a>
        <ul class="dropdown-menu">
          <li><a href="#">Conducere</a></li>
          <li><a href="#">Consiliu</a></li>
          <li><a href="#">Departamente</a></li>
          <li><a href="#">Administratie</a></li>
          <li><a href="#">Secretariat</a></li>
        </ul>
      </li>

我需要更改哪些内容，只有我点击下拉列表的菜单？

谢谢！

Answer 1

找到切换后的菜单：

$('.dropdown-toggle').click(function() {
  $(this).next('.dropdown-menu').toggle();
});

示例：http://codepen.io/paulroub/pen/YXKzGm

Answer 2

如果您有多个菜单，我更喜欢使用它：

$(document).ready(function() {
    $('.dropdown-toggle').click(function() {
        $('.dropdown-menu').slideUp();
        $(this).next('dropdown-menu').slideDown();
    );
});

这样做的好处是它将关闭任何其他打开的下拉菜单，然后打开已单击的菜单。可以进一步改进以检查点击的.dropdown-toggle当前是否打开。

Answer 3

问题在于，您注册的处理程序会选择类dropdown-menu的任何内容，然后切换它，因为您已写过：

$('.dropdown-toggle').click(function() {
    $('.dropdown-menu').toggle();
  });

正如您所说，您不想在该课程中切换所有内容，您只想切换所点击的内容，因此您应该使用event中的click()参数来查找内容单击了＃39;并选择相关的下拉菜单以切换：

$('.dropdown-toggle').click(function(e) {
  $(e.target).next('.dropdown-menu').toggle();
});

Answer 4

我能用这个HTML

做到这一点

<a href="#" class="dropdown-toggle" data-toggle="dd1">Dropdown 1<span class="caret"></span></a>
<ul class="dropdown-menu dd1" role="menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
</ul>
<a href="#" class="dropdown-toggle" data-toggle="dd2">Dropdown 2 <span class="caret"></span></a>
<ul class="dropdown-menu dd2" role="menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
</ul>

和这个jQuery：

$(".dropdown-toggle").click(function(e) {
    $(this).next('.dropdown-menu').toggle();
});

注：

只是JS不适合我。
数据切换，bootstrap似乎使用它来识别哪个<ul>根据类名切换。
与Paul Roub的答案结合使用，以覆盖默认行为。

如何不同时切换所有菜单

4 个答案: