Question

前言，很抱歉，如果答案在于javascript，但我目前正在网上上课并且尚未学习javascript，因此我无法解决问题，因为我的理解是真的现在缺乏。

我在下面有一个带导航片的bootstrap下拉菜单。我的问题是，当我点击工作下拉列表中的链接并且href链接到页面上的另一个位置（单页网站）时，单击后菜单不会关闭。如果href是空的，那么＃＆＃34;＃＆＃34;然后结束了。我不能为我的生活解决这个问题。

<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>

Answer 2

点击链接时，请设置回来。类aria-expanded

的主锚标记上的true到dropdown-toggle

$('ul.dropdown-menu li a').on('click',function(){ $(this).closest('li.dropdown').find('a.dropdown-toggle').attr('aria-expanded','false'); });

单击指向同一页面的链接时，Bootstrap Dropdown不会关闭

2 个答案: