Выпадающее меню не работает в рабочем режиме

Я работаю над раскрывающимся списком CSS ниже. Он отлично работает для мобильной версии, но для настольной версии он создает проблему.Выпадающее меню не работает в рабочем режиме

<div class="container"> 
     <div class="navbar-header"> 
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-6"> <a class="navbar-brand" href="#/home"><img src="img/logo.png" class="img-responsive" alt="Learn Education" title="Learn Education"/></a></div> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 
     </div> 
     <div class="collapse navbar-collapse col-lg-6 col-md-6 col-sm-12 col-xs-7 pull-right" id="bs-example-navbar-collapse-1" style="border:none;border-radius:15px;"> 
      <ul class="nav navbar-nav navbar-right changeme" id="visibid"> 
       <li> <a href="#" data-toggle="collapse" data-target=".navbar-collapse">Home</a> </li> 
       <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse">LogIn</a></li> 
       <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse">SignUp</a></li> 
        <li class="dropdown"> 
         <a href="#" data-toggle="dropdown" class="dropdown-toggle">Sample Test <b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse">Mathematics</a></li> 
          <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse">Physics</a></li> 
          <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse">Chemistry</a></li> 
         </ul> 
        </li> 
       <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse">Reports</a></li> 
       <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse">About Us</a></li> 
       <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse">Contact Us</a></li> 
       <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse">DashBoard</a></li> 
      </ul> 
     </div> 
    </div>

Адрес Plnkr.

Для того, чтобы найти ошибку, перейдите в полноэкранный режим и нажмите любую из этих кнопок.

источник

2015-06-12 Ramana Uday

Можете ли вы описать вашу проблему более четко? Что вы ожидаете увидеть? Когда я нажимаю кнопку, появляется меню –

может переключиться в полноэкранный режим на плункер и нажать любую кнопку, тогда вы можете увидеть его Нажмите на имени пользователя или регистрации или дома –

Как это нормально, если исправить это, вам нужно удалить обкатку начальной загрузки и включить jQuery slideToggle. Я могу помочь вам исправить это. –

Добав запросов

@media screen and (min-width: 768px) { 
    #bs-example-navbar-collapse-1{ 
     display:none; 
    }   
}

источник

2015-06-12 10:02:16 user3543872

Вы должны удалить data-target=".navbar-collapse" data-toggle="collapse" из всех звеньев - это вызывает Bootstrap JS, чтобы попытаться свернуть меню, выполните

источник

2015-06-12 09:29:32

Но без этого выпадающее меню не закрывается, когда я нажимаю любую кнопку –

Выпадающее меню не работает в рабочем режиме

ответ

Смежные вопросы