Bootstrap Navbar下拉菜单每次都会打开第一个下拉菜单

Question

下面是导航栏中的代码段，其中某些列表项是下拉列表。以下导航提供三个标签。其中两个是下拉列表。但是，仅当只有一个列表项具有下拉功能时，下拉功能才起作用。

当您进行多个下拉菜单时，无论何时单击该下拉菜单，始终会打开第一个下拉菜单。因此，在这种情况下，即使您选择第三个项目，“ chapter2”也将始终下拉。

//First Nav Element
<li id="chapter1" class="dropdown" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
  <p>TITLE HERE</p>
<li>

//Second Nav Element
<li id="chapter1" class="dropdown" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
  <p>TITLE HERE</p>

  <ul class="dropdown-menu show">
    <li>
      <p>SUBTITLE 1</p>
    </li>
    <li>
      <pSUBTITLE 2</p>
    </li>
  </ul>
</li>

//Third Nav Element
<li id="chapter2" class="dropdown" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
  <p>TITLE HERE</p>

  <ul class="dropdown-menu show">
    <li>
      <p>SUBTITLE 1</p>
    </li>
    <li>
      <pSUBTITLE 2</p>
    </li>
  </ul>
</li>