Bootstrap混合下拉切換

Question

我在1頁上有2個下拉菜單，其中1個用於注銷，1個用於圖表。 問題是無論我按下哪個按鈕，下拉注銷始終彈出。 如何分隔這2個下拉按鈕？

我的圖表

<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"另外一個。