Question

我的bootstrap 3下拉菜单存在问题，特别是当它在菜单的汉堡包版本上时。发生了以下行动：

选择菜单项后，下次打开菜单时，ul中的所有项目都会突出显示。
在移动设备上查看页面时，一旦选择了菜单项，菜单就不会消失。

我尝试过几个不同的脚本，类似于this Github topic，但我认为我将脚本放在错误的位置。我做了一些不同的改变试图让它工作，但我无法弄明白。我从w3schools主题获取了来源。

我们非常感谢您解决此问题。

提前致谢。

以下是我使用的导航栏代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-default navbar-fixed-top" id="myNavBar">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a href="#Home">
        <img src="images/home.png" alt="Logo" width="275" height="50">
      </a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 1</a>
          <ul class="dropdown-menu">
            <li><a href="#comp1.1">Section 1.1</a></li>
            <li><a href="#comp1.2">Section 1.2</a></li>
            <li><a href="#comp1.3">Section 1.3</a></li>
          </ul>
        </li>

        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 2</a>
          <ul class="dropdown-menu">
            <li><a href="#comp2.1">Section 2.1</a></li>
            <li><a href="#comp2.2">Section 2.2</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

必须向其中添加一些jQuery，它才有效。

一旦我有机会，会使slideUp过渡更顺畅。只添加和删除少数分类工作。

在切换时，您将删除已删除的类。所以不用担心。

将以下代码放在您的<html>

之前的html中

<script>
 JqUery  text
</script>

＆＃13;

$(".dropdown-menu").click(function() {
  $(".navbar-collapse").removeClass("in");
  $(".navbar-toggle").addClass("collapsed");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-default navbar-fixed-top" id="myNavBar">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a href="#Home">
        <img src="images/home.png" alt="Logo" width="275" height="50">
      </a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 1</a>
          <ul class="dropdown-menu">
            <li><a href="#comp1.1">Section 1.1</a></li>
            <li><a href="#comp1.2">Section 1.2</a></li>
            <li><a href="#comp1.3">Section 1.3</a></li>
          </ul>
        </li>

        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 2</a>
          <ul class="dropdown-menu">
            <li><a href="#comp2.1">Section 2.1</a></li>
            <li><a href="#comp2.2">Section 2.2</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

＆＃13;

Bootstrap 3 - 菜单问题（突出显示和隐藏）

1 个答案: