Twitter Bootstrap Broken Dropdown

-1

У меня уже давно работает загрузочный сайт (с 2,2 иш). Недавно я пытался закрепить страницу, заметив, что раскрывающаяся панель больше не функционирует. Это было странно, поскольку оно было проверено ранее, и никаких проблем не возникало примерно год назад.Twitter Bootstrap Broken Dropdown

Я пробовал заменять части HTML с некоторыми более новыми примерами начальной загрузки за последние несколько часов, но я не могу показать, что выпадающее меню больше работает.

Для отладки я выделил проблему в своем простейшем случае с помощью HTML ниже.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 

    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> 

    </head> 

    <body> 


    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="navbar-inner"> 
     <div class="container"> 
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </a> 
      <div class="brand">Test</div> 
      <div class="nav-collapse collapse"> 
      <ul class="nav"> 
       <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></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 class="divider"></li> 
        <li class="dropdown-header">Nav header</li> 
        <li><a href="#">Separated link</a></li> 
        <li><a href="#">One more separated link</a></li> 
       </ul> 
       </li> 


      </ul> 
      </div><!--/.nav-collapse --> 
     </div> 
     </div> 
    </div> 



    <!-- Placed at the end of the document so the pages load faster --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script> 
    <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script> 


    </body> 
</html>

Любые идеи о том, чего я мог бы потерять, были бы очень благодарны. Я считаю, что это может быть несоответствие между версиями Bootstrap, которые вызывают эту проблему. Тем не менее, я пытаюсь реорганизовать как можно меньше HTML, чтобы получить раскрывающийся список, поскольку я больше не знаком с этим старым кодом.

В конечном счете, я пытаюсь исправить эту ошибку, не переходя из 2.2.2.

источник

2014-02-17 user1431282

Я не уверен, где он находится в вашем файле javascript, но вам нужно дать li класс «open». Когда li имеет класс «открыто», он отобразит выпадающее меню. Так у, возможно, захотите добавить что-то вроде сценария:

$('.dropdown a').on('click', function() { 
    $(this).closest('li').toggleClass('open'); 
});

Или вы можете изменить click в hover. Твой выбор.

UPDATE

$('html').on('click', function() { 
    $('.dropdown.open').removeClass('open'); 
}); 
$('.dropdown a').on('click', function (e) { 
    e.stopPropagation(); 
    $(this).closest('li').addClass('open'); 
});

источник

2014-02-17 02:10:34 Chanckjh

Спасибо :), что будет исправить эту проблему. Однако мой JS довольно ржавый. Как мне изменить код так, что выпадающее окно исчезнет после нажатия в любом месте экрана, а не только кнопки. – user1431282

теперь вы можете закрыть его снаружи. И отметьте ответ как правильный PLS – Chanckjh

Twitter Bootstrap Broken Dropdown

ответ

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