Html 引导导航栏下拉菜单每次打开第一个下拉菜单

下面是导航栏中的代码片段，其中一些列表项是下拉列表。下面有三个导航选项卡。其中两个是下拉列表。但是，只有当列表项中只有一个可以下拉时，下拉功能才起作用

当您创建多个下拉列表时，无论何时单击该下拉列表，都会打开第一个下拉列表。因此，在这种情况下，“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>

//第一个导航元素

标题在这里


//第二导航要素

标题在这里



副标题1



要么包含更多代码，要么制作一个jsfiddle，这样我们就可以重现问题……您的代码中也有错误：
之后尝试从以下位置删除“show”类：