javascript - Bootstrap 下拉菜单不会在单击指向同一页面的链接时关闭

Question

作为序言，如果答案在 javascript 中，我很抱歉，但我目前正在在线学习类(class)，还没有学习 javascript，所以我不能很好地解决问题，因为我现在确实缺乏理解。

我有一个带有导航丸的 Bootstrap 下拉菜单。我的问题是，当我单击我的工作下拉列表中的链接并且 href 链接到页面上的另一个位置(单页网站)时，菜单在单击后不会关闭。如果 href 为空并带有“#”，则它会关闭。我这辈子都解决不了这个问题。

<li role="presentation" class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Work</a>
  <ul class="dropdown-menu">
    <li>
      <a href="#work1">Work 1</a>
    </li>
    <li>
      <a href="#work2">Work 2</a>
    </li>
  </ul>
</li>

如果我遗漏了什么(javascript？)请告诉我，这是我的第一篇文章。

Answer 1

不太确定问题的根源，但这是强制关闭下拉菜单的一个很好的解决方法。

<script> 
//Can go in a sperate .js file as well
function closeDropdowns() {
    $(".dropdown-toggle").each(function() {
        $(this).attr("aria-expanded", false);
        $(this).parent("li").removeClass("open");
    });
}
</script>

<li role="presentation" class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Work</a>
  <ul class="dropdown-menu">
    <li>
      <a href="#work1" onclick="closeDropdowns();">Work 1</a>
    </li>
    <li>
      <a href="#work2" onclick="closeDropdowns();">Work 2</a>
    </li>
  </ul>