Bootstrap Dropdown效果-jQuery

Question

我有一個Bootstrap菜單，但“ About Us的下拉菜單無法正常運行。 在此處嘗試演示： https : //jsfiddle.net/wbbpdfm7/

 /* Latest compiled and minified CSS included as External Resource*/ /* Optional theme */ body { margin: 10px; } 

 <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <nav class="navbar navbar-default navbar-fixed-top" style="background:#fff"> <div class="container"> <div class="navbar-header title"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1"> <ul id="menu-primary-menu" class="nav"> <li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown menu-item-13"> <a href="http://localhost:8888/about-us/" class="dropdown-toggle" data-toggle="dropdown">About Us<b class="caret"></b></a> <ul class="dropdown-menu depth_0"> <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"> <a href="http://localhost:8888/about-us/the-team/">The Team</a> </li> <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-39"> <a href="http://localhost:8888/about-us/michael/">Michael</a> </li> </ul> </li> <li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12"> <a href="http://localhost:8888/bespoke/">Bespoke</a> </li> <li id="menu-item-15" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-15"> <a href="http://localhost:8888/category/blog-news/">Blog</a> </li> <li id="menu-item-11" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-9 current_page_item active menu-item-11"> <a href="http://localhost:8888/contact-us/">Contact Us</a> </li> </ul> </div> </div> </nav> 

看看我如何單擊菜單圖標，我希望“ About Us子菜單打開，但是未打開。

我究竟做錯了什么？

Answer 1

您已經從<ul id="menu-primary-menu" class="nav">刪除了.navbar-nav ，因此您需要在移動視圖中復制其樣式級聯。

@media (max-width: 767px) {
.navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: rgba(0, 0, 0, 0);
    border: 0;
    box-shadow: none;
}}

將以上CSS中的.navbar-nav替換為您選擇的類，以避免發生沖突並進一步針對您的設計進行調整。