javascript - Bootstrap 混合下拉菜单切换

Question

我在 1 页上有 2 个下拉菜单，1 个用于注销，1 个用于图表。问题是我按下下拉注销的任何按钮总是弹出。如何分离这两个下拉按钮？

我的图表

<button class="btn btn-secondary dropdown-toggle" type="button" id="chartDropdown" onclick="dropdownChart()">
  Chart
</button>
<div class="dropdown-menu dropdown-menu-right" style="width:400px;" id="dropdownShow" aria-labelledby="chartDropdown">
  <form class="px-2 py-2" action="{{ url('purchase') }}" method="post">
    {{csrf_field()}}
    <div id="items"></div>
    <div class="row mx-1 px-2">
      <input type="text" name="fromE" value="#" id="fromE">
      <input type="text" name="mode" value="add">
      <input type="text" name="total" value="" id="total">
      <button type='submit' class="btn btn-primary">Purchase</button>
    </div>
  </form>
</div>

我的注销按钮

<ul class="nav navbar-nav ml-auto">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="dropdown()">
      {{ Auth::user()->name }}
    </a>
    <div class="dropdown-menu dropdown-menu-right" id="dropdownShow" aria-labelledby="navbarDropdownMenuLink">
      <a class="nav-link " href="{{ route('logout') }}">Logout</a>
    </div>
  </li>
</ul>

Answer 1

您的两个下拉按钮具有相同的 ID。

为其中一个按钮指定不同的 ID，例如“图表”按钮的 id="dropdownShowChart" 和另一个按钮的 id="dropdownShowLogout"。