【问题标题】:Bootstrap 3: Dropdown menu on a fix top bar navbar inverse NOT DROPPING DOWNBootstrap 3:固定顶部栏导航栏反向的下拉菜单不下拉
【发布时间】:2014-06-21 14:11:57
【问题描述】:

似乎代码很好,但在浏览器上下拉菜单不起作用,菜单根本没有下拉...我也附上了js脚本字符串...我不知道该怎么办,我找不到问题...

谢谢,

最大

<div class="row">
 <nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
  <div class="container">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
     <span class="sr-only">Toggle navigation</span>
     <span class="glyphicon glyphicon-arrow-down"></span>MENU</button>  
</div>
    <div class="collapse navbar-collapse" id="collapse">
        <ul class="nav navbar-nav">
            <li class="active" class="dropdown"><a href="#" data-toggle="dropdown">Home<span     class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Last Minute</a></li>
                    <li><a href="#">News Letter</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                </ul>
            </li>                    
            <li class="dropdown"><a href="#" data-toggle="dropdown">Africa<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Info</a></li>
                    <li><a href="#">Health</a></li>
                    <li><a href="#">Flights</a></li>
                    <li><a href="#">Ferry</a></li>
                    <li><a href="#">Bus</a></li>
                    <li><a href="#">Train</a></li>
                    <li><a href="#">Overland</a></li>
                </ul>
            </li>
            <li class="dropdown"><a href="#" data-toggle="dropdown">Destinations<span class="caret"></span></a>
                <ul class="dropdown-menu">      
                    <li class="dropdown"><a href="#" data-toggle="dropdown">Burundi<span class="caret"></span></a>
                        <ul class="dropdown-menu-right">
                            <li><a href="#">Info</a></li>
                            <li><a href="#">Bujumbura</a></li>
                            <li><a href="#">Pacakges</a></li>
                            <li><a href="#">Gorilla</a></li>
                            <li><a href="#">Safaris</a></li>
                            <li><a href="#">Hotels</a></li> 
                            <li><a href="#">Transfers</a></li>
                            <li><a href="#">Excursions</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="#" data-toggle="dropdown">Kenya<span class="caret"></span></a>
                        <ul class="dropdown-menu-right">
                            <li><a href="#">Info</a></li>
                            <li><a href="#">Nairobi</a></li>
                            <li><a href="#">Mombasa</a></li>
                            <li><a href="#">Pacakges</a></li>
                            <li><a href="#">Safaris</a></li>
                            <li><a href="#">Hotels</a></li> 
                            <li><a href="#">Transfers</a></li>
                            <li><a href="#">Excursions</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="#" data-toggle="dropdown">Rwanda<span class="caret"></span></a>
                        <ul class="dropdown-menu-right">
                            <li><a href="#">Info</a></li>
                            <li><a href="#">Kigali</a></li>
                            <li><a href="#">Pacakges</a></li>
                            <li><a href="#">Gorilla</a></li>
                            <li><a href="#"Safaris</a></li>
                            <li><a href="#">Hotels</a></li> 
                            <li><a href="#">Transfers</a></li>
                            <li><a href="#">Excursions</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="#" data-toggle="dropdown">Tanzania<span class="caret"></span></a>
                        <ul class="dropdown-menu-right">
                            <li><a href="#">Info</a></li>
                            <li><a href="#">Dar es Salaam</a></li>
                            <li><a href="#">Arusha</a></li>
                            <li><a href="#">Pacakges</a></li>
                            <li><a href="#">Safaris</a></li>
                            <li><a href="#">Kilimanjaro</a></li>
                            <li><a href="#">Hotels</a></li> 
                            <li><a href="#">Transfers</a></li>
                            <li><a href="#">Excursions</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="#" data-toggle="dropdown">Zambia<span class="caret"></span></a>
                        <ul class="dropdown-menu-right">
                            <li><a href="#">Info</a></li>
                            <li><a href="#">Lusaka</a></li>
                            <li><a href="#">Zambezi River</a></li>
                            <li><a href="#">Pacakges</a></li>
                            <li><a href="#">Safaris</a></li>
                            <li><a href="#">Hotels</a></li> 
                            <li><a href="#">Transfers</a></li>
                            <li><a href="#">Excursions</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="#" data-toggle="dropdown">Zanzibar<span class="caret"></span></a>
                        <ul class="dropdown-menu-right">
                            <li><a href="#">Info</a></li>
                            <li><a href="#">Stonetown</a></li>
                            <li><a href="#">Beach</a></li>
                            <li><a href="#">Pacakges</a></li>
                            <li><a href="#">Festivals</a></li>
                            <li><a href="#">Hotels</a></li> 
                            <li><a href="#">Transfers</a></li>
                            <li><a href="#">Excursions</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Gallery</a></li>
            <li class="dropdown"><a href="#" data-toggle="dropdown">Serene<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">About</a></li>
                    <li><a href="#">Team</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Reservations</a></li>
                    <li><a href="#">Payments</a></li> 
                    <li><a href="#">Admin</a></li>
                </ul>
            </li>
            <li class="dropdown"><a href="#" data-toggle="dropdown">Members<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Specials</a></li>
                    <li class="dropdown"><a href="#" data-toggle="dropdown">Rates<span class="caret"></span></a>
                        <ul class="dropdown-menu-right">
                           <li class="dropdown"><a href="#" data=toggle="dropdown">Burundi<span class="caret"></span></a>
                              <ul class="dropdown-menu-right">
                                 <li><a href="#">Pacakges</a></li>
                                 <li><a href="#">Hotels</a></li> 
                                 <li><a href="#">Transfers</a></li>
                                 <li><a href="#">Activities</a></li>
                              </ul>
                           </li>
                           <li class="dropdown"><a href="#" data-toggle="dropdown">Kenya<span class="caret"></span></a>
                              <ul class="dropdown-menu-right">
                                 <li><a href="#">Pacakges</a></li>
                                 <li><a href="#">Hotels</a></li> 
                                 <li><a href="#">Transfers</a></li>
                                 <li><a href="#">Activities</a></li>
                              </ul>
                           </li>
                           <li class="dropdown"><a href="#" data-toggle="dropdown">Rwanda<span class="caret"></span></a>
                              <ul class="dropdown-menu-right">
                                <li><a href="#">Pacakges</a></li>
                                <li><a href="#">Hotels</a></li> 
                                <li><a href="#">Transfers</a></li>
                                <li><a href="#">Activities</a></li>
                              </ul>
                           </li>
                           <li class="dropdown"><a href="#" data-toggle="dropdown">Tanzania<span class="caret"></span></a>
                              <ul class="dropdown-menu-right">
                                <li><a href="#">Pacakges</a></li>
                                <li><a href="#">Hotels</a></li> 
                                <li><a href="#">Transfers</a></li>
                                <li><a href="#">Activities</a></li>
                              </ul>
                           </li>
                           <li class="dropdown"><a href="#" data-toggle="dropdown">Zambia<span class="caret"></span></a>
                              <ul class="dropdown-menu-right">
                                <li><a href="#">Pacakges</a></li>
                                <li><a href="#">Hotels</a></li> 
                                <li><a href="#">Transfers</a></li>
                                <li><a href="#">Activities</a></li>
                              </ul>
                           </li>
                           <li class="dropdown"><a href="#" data-toggle="dropdown">Zanzibar<span class="caret"></span></a>
                              <ul class="dropdown-menu-right">
                                <li><a href="#">Pacakges</a></li>
                                <li><a href="#">Hotels</a></li> 
                                <li><a href="#">Transfers</a></li>
                                <li><a href="#">Activities</a></li>
                              </ul>
                           </li>
                         </ul>
                     </li>
                  <li><a href="#">Admin</a></li>
                  <li><a href="#">High Resolutions Pictures</a></li>
              </ul>
           </li>
        </ul>             
    </div>
</div>

<!-- javascript -->

  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="/dist/js/jquery-2.1.1.min.js"></script>
  <script src="/dist/js/bootstrap.js"></script>
  <script src="/dist/js/docs.min.js"></script>
  <script>$(function () {$('.nav-tabs a:first').tab('show');});</script>
  <script>$('a.btn-info').tooltip()</script>
  <script>$('.dropdown-toggle').dropdown()</script>

<!-- End Body -->

【问题讨论】:

    标签: javascript html twitter-bootstrap drop-down-menu navbar


    【解决方案1】:

    当我将它放入带有 bootstrap-sass 设置的示例 rails 4 应用程序时,此方法有效。你确定你的下拉菜单没有打开吗?我以前的应用程序出现问题,我认为它没有打开,但它只是被包含元素隐藏了,该元素被意外设置为“溢出:隐藏;”。

    无论如何,您发布的代码似乎没有任何问题。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2019-12-16
      • 2016-10-15
      • 1970-01-01
      • 1970-01-01
      • 2017-07-01
      • 1970-01-01
      • 2018-10-09
      • 2012-10-12
      相关资源
      最近更新 更多