Bootstrap 3折叠菜单无法在移动屏幕上运行

时间：2016-06-28 14:37:07

标签： javascript jquery html css

我已经看过这个话题， Bootstrap 3 collapsed menu not working on mobile screens 但仍然无法解决，我得到按钮，但它没有工作

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GREENLUX</title>

<!-- Bootstrap -->
<link href="http://greenlux.pt/apresentacao/css/bootstrap.css" rel="stylesheet" type="text/css">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<nav>
  <div class="container"> 
    
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <!--  -->
      <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="http://greenlux.pt"><img src="http://greenlux.pt/logo_gl.png" width="125" height="21" alt=""/></a> 
      </div>
      
      
    
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="http://greenlux.pt/apresentacao/">Início <span class="sr-only">(current)</span></a> </li>
        </ul>
        
      <ul class="nav navbar-nav navbar-right hidden-sm">
        <li><a href="#">GU10</a> </li>
        
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">E27 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Par30</a> </li>
            <li><a href="#">Par38</a> </li>
                      </ul>
        </li>
      
      
      <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">R7S <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li role="separator" class="divider"></li>
            <li>&emsp;360º</li>
            <li role="separator" class="divider"></li>
            <li><a href="#">78mm</a> </li>
            <li><a href="#">118mm</a> </li>
            <li><a href="#">138mm</a> </li>
            <li role="separator" class="divider"></li>
            <li>&emsp;180º</li>
            <li role="separator" class="divider"></li>
            <li><a href="#">118mm </a> </li>
          </ul>
        </li>
        
        <li><a href="#">G24</a> </li>
        
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">2G11 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">10W</a> </li>
            <li><a href="#">32W</a> </li>
          </ul>
        </li>
        
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">SPOT <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Redondo</a> </li>
            <li><a href="#">Quadrado</a> </li>
          </ul>
        </li>
        
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">DOWNLIGHTS <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">15W</a> </li>
            <li><a href="#">30W</a> </li>
          </ul>
        </li>
        
        <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">PLAFON 
        <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Redondo</a> </li>
            <li><a href="#">Oval</a> </li>
          </ul>
        </li>
        
        <!--
        
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a> </li>
            <li><a href="#">Another action</a> </li>
            <li><a href="#">Something else here</a> </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a> </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a> </li>
          </ul>
        </li>
        
        -->
        
      </ul>
      
      <!--
      
      <ul class="nav navbar-nav navbar-right hidden-sm">
        <li><a href="#">Link</a> </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a> </li>
            <li><a href="#">Another action</a> </li>
            <li><a href="#">Something else here</a> </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a> </li>
          </ul>
        </li>
      </ul>
      -->
      
    </div>
    <!-- /.navbar-collapse --> 
  </div>
  <!-- /.container-fluid --> 
</nav>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="http://greenlux.pt/apresentacao/js/jquery-1.11.3.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="http://greenlux.pt/apresentacao/js/bootstrap.js"></script>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

和顺便说一句，如何通过鼠标悬停打开菜单？ 我已经尝试过了，无法做到这一点

1 个答案:

答案 0 :(得分：0)

您需要在导航代码中至少放置一类navbar。但显然还有其他问题，所以这里是默认导航栏的一个工作示例。从那里你可以根据自己的喜好改变CSS。我还添加了一项更改，以便在悬停时显示下拉列表。

https://jsfiddle.net/gno4zcrr/1/

＆＃13;
＆＃13; 
.dropdown:hover .dropdown-menu {
   display: block;
}
＆＃13; 
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-default">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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="http://greenlux.pt">
        <img src="http://greenlux.pt/logo_gl.png" width="125" height="21" alt="" />
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">

        <li><a href="#">GU10</a> </li>

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">E27 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Par30</a> </li>
            <li><a href="#">Par38</a> </li>
          </ul>
        </li>


        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">R7S <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li role="separator" class="divider"></li>
            <li>&emsp;360º</li>
            <li role="separator" class="divider"></li>
            <li><a href="#">78mm</a> </li>
            <li><a href="#">118mm</a> </li>
            <li><a href="#">138mm</a> </li>
            <li role="separator" class="divider"></li>
            <li>&emsp;180º</li>
            <li role="separator" class="divider"></li>
            <li><a href="#">118mm </a> </li>
          </ul>
        </li>

        <li><a href="#">G24</a> </li>

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">2G11 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">10W</a> </li>
            <li><a href="#">32W</a> </li>
          </ul>
        </li>

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">SPOT <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Redondo</a> </li>
            <li><a href="#">Quadrado</a> </li>
          </ul>
        </li>

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">DOWNLIGHTS <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">15W</a> </li>
            <li><a href="#">30W</a> </li>
          </ul>
        </li>

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">PLAFON 
        <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Redondo</a> </li>
            <li><a href="#">Oval</a> </li>
          </ul>
        </li>

      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题