Question

我正在尝试使基于Bootstrap 3的菜单正常工作。问题是它通过导航栏切换按钮工作一次（打开然后关闭菜单），但导航栏切换符号只是消失了。我做了一些研究，页面首先加载jquery.js然后加载bootstrap.js。菜单包括一个顶部导航栏和一个侧边栏，两者的项目都正确插入到折叠菜单中，并且一旦切换到桃子就切换。然而，由于没有按钮，切换两次是不可能的。

以下是相关代码：

<nav class="navbar navbar-inverse navbar-fixed-top" data-role="navbar">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>      
      </button>
      <a class="navbar-brand" href="index.html"><img src="images/logo2.png" style="height:35px" /></a>
    </div>

    <div class="collapse navbar-collapse" role="navigation">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="index.php"><img src="images/home.png" class="img" /></a></li>
            <li><a href="#"><img src="images/yyv.png" alt="" class="img" /></a></li>
            <li><a href="#"><img src="images/cxy.png" alt="" class="img" /></a></li>
            <li><a href="#"><img src="images/xxy.png" alt="" class="img" /></a></li>
            <li><a href="content_contact.php"><img src="images/kontakt.png" alt="Impressum" class="img" /></a></li>
        </ul>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav side-nav">
            <li id="home" class="active"><a href="#"><i class="fa fa-cloud"></i> Home</a></li>
            <li id="manage-users"><a href="#"><i class="fa fa-users fa-fw"></i> Users</a></li>
            <li id="ges"><a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Lorem</a></li>
            <li id="dropdown" class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-exchange fa-fw"></i> Ipsum <b class="caret"></b></a>
              <ul class="dropdown-menu" id="extra_content"></ul>
            </li>
        </ul>
    </div>

Answer 1

你有一些CSS覆盖默认的Bootstrap行为（隐藏切换按钮）......

.collapsed{
    display             : none;
    border              : 0;
}

删除后，

切换按钮会起作用..

http://jsfiddle.net/kTyLg/

navbar-toggle工作一次然后消失

1 个答案: