Выпадающее меню Twitter Bootstrap не работает

Я знаю, что в Qaru есть много вопросов, и я смотрел на них, но мое раскрывающееся меню все еще не работает.

Здесь мой код:

<div class="navbar navbar-inverse navbar-fixed-top">
                <div class="navbar-inner">
                        <div class="container">
<ul class="nav pull-left">
<li><a href="#myModal" class="dropdown-toggle" data-toggle="modal" data-keyboard="false" data-backdrop="static">Login</a></li>
 <li class="dropdown" id="accountmenu">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">My Account<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Login</a></li>
                            <li><a href="#">Register</a></li>
                        </ul>
                    </li>
                        </div>
                </div>
</div>

Что с ним не так?

ИЗМЕНИТЬ

Итак, выпадающее меню теперь работает с ответом, отправленным на этот вопрос. Однако, если я включаю упоминаемые здесь сценарии, модальное окно перестает работать. И когда я комментирую эти записи, он снова начинает работать.

Здесь код для моего модального окна:

<div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            X</button>
        <h3 id="myModalLabel">
            Enter your Credentials</h3>
    </div>
    <div class="modal-body">
        <form class="form-horizontal">
    <div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
    <input type="email" id="inputEmail" placeholder="Email">
    </div>
    </div>
    <div class="control-group">
    <label class="control-label" for="inputPassword">Password</label>
 </div>
    </div>
    <div class="control-group">
    <div class="controls">
    <label class="checkbox">
    <input type="checkbox"> Remember me
    </label>
    <a href="news.php" class="btn btn-primary">Login</a>
    <a href="registration.php" class="btn btn-primary">Sign up</a>
    </div>
    </div>
    </form>
    </div>
</div>

И JavaScript для триггера:

$('#myModal').on('hide',function(){
    $('.nav > li > a.modal-open-li').removeClass('modal-open-li');
});

Ответы

Ответ 1

Кажется хорошо работать в jsFiddle, вот пример http://jsfiddle.net/2hGuv/

Не забудьте импортировать файл js. здесь приведен код со следующими импортированными файлами: http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav pull-left">
                <li><a href="#myModal" class="dropdown-toggle" data-toggle="modal" data-keyboard="false" data-backdrop="static">Login</a>

                </li>
                <li class="dropdown" id="accountmenu"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">My Account<b class="caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="#">Login</a>

                        </li>
                        <li><a href="#">Register</a>

                        </li>
                    </ul>
                </li>
        </div>
    </div>
</div>

Ответ 2

Для тех, кто все еще испытывает эту проблему. Я обнаружил, что дважды включал файлы bootstrap js (я разделил файлы заголовка, тела и нижнего колонтитула и не понял, что я включал их как в нижний колонтитул, так и в заголовок.

Может помочь кому-то.

Ответ 3

У меня была аналогичная проблема. И причиной был неправильный порядок js файлов в теге head. Правильный порядок - это jquery.min.js сначала, чем bootstrap.min.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

Ответ 4

Проверьте, есть ли у вас это в js файлах: $('.dropdown-toggle').dropdown();

Проверьте, есть ли у вас что-то подобное в этой последовательности:

<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script type="text/javascript"> $(document).ready(function () { $('.dropdown-toggle').dropdown(); }); </script>

проверьте это: Выпадающие меню Bootstrap и вкладки tabbable на Docpad

Ответ 5

Добавление этого в мою готовую функцию устранило проблему для меня

$('.dropdown-toggle').dropdown();

Ответ 6

Для меня это из-за того, что порядок добавления скриптов был неправильным, это должно быть примерно так:

<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>

Ответ 7

В моем случае проблема была в версии jQuery. В bootstrap.js v3.3.6

if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] > 2)) {
    throw new Error('Bootstrap\ JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3')
  }

Примечание: 'Bootstrap\JavaScript требует jQuery версии 1.9.1 или новее, но ниже версии 3

Я заменил код локального файла jQuery на jQuery-1.11.3.js и начал работать.

Надеюсь, что это сработает и для вас.

Ответ 8

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