Question

我正在使用Bootstrap 4，导航栏始终需要2次单击才能打开下拉菜单，所以我想使用jquery进行管理...

导航栏如下所示：

<nav class="navbar fixed-top navbar-dark navbar-expand-sm" id="cssmenu">

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
      aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="basicExampleNav">

    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="homeb.html">Home</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" id="elements" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">Elements</a>
        <div class="dropdown-menu dropdown-primary pb-0" aria-labelledby="elements">
          <a class="dropdown-item" href="element1.html">Element1</a>
          <a class="dropdown-item" href="element2.html">Element2</a>
          <a class="dropdown-item" href="element3.html">Element3</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" id="options" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">Options</a>
        <div class="dropdown-menu dropdown-primary pb-0" aria-labelledby="options">
          <a class="dropdown-item" href="option1.html">Option1</a>
          <a class="dropdown-item" href="otion2.html">Option2</a>
        </div>
      </li>
    </ul>
  </nav>

我正在尝试类似的方法，但是我无法使其工作……

$(".dropdown-toggle").on("click", function() {
     $(".dropdown-menu").toggle();
});
$(".dropdown-item").on("click", function() {

});

问题在于，在第一部分中，它可以工作，但可以打开所有下拉列表，而不仅仅是打开我单击过的下拉列表。在第二部分中，我需要执行相同的$（“。dropdown-menu”）。toggle（）;我想，但是再说一次，仅适用于我打开的那张。

有人可以帮助我吗？

谢谢。

Answer 1

将类更改为id：

此

$(".dropdown-toggle").on("click", function() {
     $(".dropdown-menu").toggle();
});

为此：

$("#specific_button_id").on("click", function() {
     $(".dropdown-menu").toggle();
});

一个类，适用于文档中所有提及的内容，并且ID用于特定任务。

希望对您有所帮助。：）

Answer 2

尝试一下...

$(".dropdown-toggle").on("click", function() {

      $(this).parent().find(".dropdown-menu").toggle();
});

进行下拉菜单的jQuery查询

2 个答案: