Bootstrap mixed下拉切换

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，比如为Chart按钮指定id="dropdownShowChart"，并为另一个按钮指定id="dropdownShowLogout"。