时间戳

首页 > 解决方案 > 为下拉菜单制作 jquery

jquery - 为下拉菜单制作 jquery

问题描述

我正在使用 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(); 我想但又一次，只针对我打开的那个。

有人可以帮助我吗？

谢谢。

标签： jquerydropdown

解决方案

将类更改为 id：

这

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

对此：

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

应用于文档中提到的所有内容的类，ID 用于特定任务。

希望对您有所帮助。:)

推荐阅读