Bootstrap Dropdown effect - 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

Вы удалили .navbar-nav из <ul id="menu-primary-menu" class="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; 
}} 

Заменить .navbar-nav в CSS выше классом по вашему выбору, чтобы избежать конфликта и отрегулировать далее для вашего дизайна.