Bootstrap dropdown-переключение закрыть на щелчок

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

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

<div id="mobile-dropdown" class="nav2 w" data-spy="affix" data-offset-top="350">
                <div class="container">
                  <div class="pull-left" style="margin-top:3px; margin-right:3px;">Jump to </div>
                  <div class="pull-left">
                    <div class="btn-group mob-fl">
                         <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                            Categories
                         <span class="caret"></span>
                         </button>
                       <ul class="dropdown-menu" role="menu">
                          <li><a href="#1">One</a></li>
                          <li><a href="#2">Two</a></li>
                          <li><a href="#3">Three</a></li>
                          <li><a href="#4">Four</a></li>
                       </ul>
                    </div>
                  </div>
                </div>
              </div>

Я также взглянул на сам JS bootstrap и поймал эту строку:

if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
    // if mobile we use a backdrop because click events don't delegate
    $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
  }

это причина, почему он не закрывается? Есть ли обходной путь, чтобы заставить его работать?

EDIT:

Итак, с некоторой помощью я получил этот скрипт:

$('document').ready(function() {
      $("a.dropdown-toggle").click(function(ev) {
          $("a.dropdown-toggle").dropdown("toggle");
          return false;
      });
      $("ul.dropdown-menu a").click(function(ev) {
          $("a.dropdown-toggle").dropdown("toggle");
          return false;
      });
  });

мой javascript довольно слаб, как мне на самом деле редактировать это, чтобы он работал только в моем "мобильном выпадающем списке" id div.

так я обновил свой скрипт для этого:

$('document').ready(function() {
  $("#subject_cat_mob .dropdown-toggle").click(function(ev) {
      $("#subject_cat_mob .dropdown-toggle").dropdown("toggle");
      return false;
  });
  $("#subject_cat_mob ul.dropdown-menu a").click(function(ev) {
      $("#subject_cat_mob .dropdown-toggle").dropdown("toggle");
      return false;
  });
});

это работает, как я хочу. Но выпадающий список не откроется снова после первого раза.

6
html javascript jquery twitter-bootstrap

2 ответов

Это должно заставить его работать для вашего HTML:

$('document').ready(function() {
    $("#mobile-dropdown .dropdown-toggle").click(function() {
        $(this).dropdown("toggle");
        return false;
    });
});

обновление

вот рабочий пример, включая ваши функции гладкой прокрутки:

$(function() {
    $('a[href*=#]:not([href=#])[href^="#"]:not([data-toggle])').click(function() {
        $(this).dropdown("toggle"); // this is the important part!

        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top-100
                }, 1000);
                return false;
            }
        }
    });
});

обратите внимание на третью строку? Это все, что ему нужно:$(this).dropdown("toggle");.

вы можете проверить пример работающего на JSFiddle.

1

хорошее решение можно найти здесь:

https://github.com/CWSpear/bootstrap-hover-dropdown

добавить class="dropdown-toggle disabled"

Это лучше объяснить здесь разрешить нажмите на twitter bootstrap выпадающий переключатель ссылку?

1