Я нахожусь в середине перехода моего приложения из Bootstrap 2.3.2 на 3.3.2. У меня это в основном работает, но у меня проблемы с свернутой версией моего навигатора. Когда я на экране с уменьшенным размером (на моем телефоне или при сужении окна моего рабочего стола), я вижу кнопку спящего меню, и если я нажму на это, откроется меню, но после этого нажмите не закройте меню.Свернутое меню Bootstrap, после открытия, не закрывается снова
Это не тот же вопрос, что и this one, который касался нажатия на один из элементов в сложенном меню. В моем случае, щелчок по самому заголовку не закрывает меню, которое должно быть AFAIK.
Мой навигатор находится на сложной стороне, но не так замечательно. Eliding некоторые из основной массы, то есть:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".querki-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="/assets/images/Logo-menubar.png"></a>
</div>
<div class="querki-navbar-collapse navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#.1v" id="">All Things</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-target="#Actions" href="#Actions" data-toggle="dropdown" role="button">Actions <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><a id="" href="#">Refresh</a></li>
<li class="divider"></li>
<li><a id="" href="#">Design a Model</a></li>
...
<li class="disabled"><a>Delete All Things</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-target="#Admin" href="#Admin" data-toggle="dropdown" role="button">Admin <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><a href="/admin/manageUsers" id="">Manage Users</a></li>
...
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-target="#Logged in as Mark Waks" href="#Logged in as Mark Waks" data-toggle="dropdown" role="button">Logged in as Mark Waks <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><a href="/u/mark" id="">Your Profile</a></li>
<li><a href="/logout" id="">Log out</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input class="search-query form-control _withGadget" type="text" placeholder="Search">
</div>
</form>
<ul class="nav navbar-right">
<li>
<a href="#_notifications" class="_withGadget"><i class="icon-bell"></i></a>
</li>
</ul>
</div>
</div>
</div>
У меня есть обработчики нажмите приложенный ко многим из отдельных пунктов меню, но не AFAIK самих заголовков.
Я использую jQuery 2.1.3 (от webjars) и совершенно новый Bootstrap, поэтому 3.3.2. Я попросил все компоненты JavaScript из загрузки Bootstrap. Я не вижу никаких ошибок на консоли, когда я пытаюсь щелкнуть меню закрытым; это просто не происходит. Как ни странно, у меня возникли трудности с прикреплением обработчика кликов к .navbar-toggle (который я попытался для расследования) - опять же, ничего не происходит, когда я пытаюсь это сделать, что заставляет меня подозревать, что это связано.
Подменю do работает как ожидалось: если я нажму на один из заголовков подменю, он откроется, и щелчок снова закроет его. Таким образом, проблема вообще не является ниспадающей.
Я замечаю, что когда я нажимаю на значок верхнего меню, он открывается мгновенно, а не раздвигается так, как это делается на сайте Bootstrap. (И так, как это было в моей предыдущей версии 2.3.2.) Кроме того, когда он открывается, размер кажется фиксированным, чего раньше не было: я получаю полосу прокрутки для открытого меню и пытаюсь прокрутки, что приводит к странным mal-эффектам.
К сожалению, поскольку даже файл с минимальной загрузкой Bootstrap.js является однострочным, его очень сложно отладить. У кого-нибудь есть предложения о том, как преследовать это?
ETA: Интересно. Дополнительная привязка: эта проблема находится на моей сгенерированной программой. (В основном это одностраничное приложение.) Когда я применяю по существу те же теги к моей статической странице входа в систему, все работает отлично. Поэтому кажется, что проблема связана с созданием меню после инициализации страницы. Нужно ли мне что-то пинать с помощью JavaScript, чтобы заставить его работать правильно?