Javascript 如何不同时切换所有菜单

我第一次和Boostrap合作，请不要杀了我：D 我的导航栏有问题。我有7个菜单，每个菜单都有自己的下拉菜单。问题是，当我点击一个菜单时，它们都会同时下拉，我只需要下拉我点击的菜单。我的JS代码相当初级。 这就是我目前使用的：

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

HTML代码如下（例如一个菜单；每个菜单都有类似的代码）：

我需要更改什么，以便只单击下拉菜单

---

谢谢

找到切换后的菜单：

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

---

示例：

问题在于，您正在注册的处理程序将使用类

下拉菜单选择任何内容，然后将其切换，因为您已经编写了：

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

正如您所说，您不想使用该类切换所有内容，您只想切换单击的内容，因此您应该使用参数from查找单击的内容，并选择Relevant下拉菜单进行切换：

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

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

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

这样做的好处是，它将关闭任何其他打开的下拉菜单，然后打开已单击的菜单。
可以进一步改进以检查所单击的.dropdown切换是否当前处于打开状态。
我可以使用此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>

注:


只是JS不适合我

数据切换，bootstrap似乎使用它来根据类名确定要切换的


将其与Paul Roub的答案结合使用，以覆盖默认行为
您的选择器可能太通用了，您需要将其设置为在父容器的基础上工作，以便它知道您引用的是您单击的容器，而不是所有共享相同类名的容器。引导功能不为您处理切换吗<代码>$（'.dropdown menu'）

选择该类的每个元素。p.s。并修复断开的关闭

<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>

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