Как открыть всплывающее окно Bootstrap программно

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

Идея состоит в том, чтобы выбрать город с первого раскрывающегося списка - затем script автоматически откроет второе раскрывающееся меню с областями (и покажет только области, соответствующие выбранному городу).

Вот мой JS:

$('#sidebar_filter_city li').click(function(){   
    $('#sidebar_filter_areas').dropdown('toggle');
});

и это HTML:

<div class="dropdown form-control">
   <div data-toggle="dropdown" id="sidebar_filter_cities" class="sidebar_filter_menu" data-value="jersey-city">Jersey City<span class="caret caret_sidebar"></span></div>           
   <input type="hidden" name="advanced_city" value="jersey-city">
   <ul id="sidebar_filter_city" class="dropdown-menu filter_menu" role="menu" aria-labelledby="sidebar_filter_cities">
      <li role="presentation" data-value="">All Cities</li>
      <li role="presentation" data-value="jersey-city">Jersey City</li>
      <li role="presentation" data-value="london">London</li>
      <li role="presentation" data-value="new-york">New York</li>
   </ul>        
   </div>
</div>

<div class="dropdown form-control">
    <div data-toggle="dropdown" id="sidebar_filter_areas" class="sidebar_filter_menu">All Areas<span class="caret caret_sidebar"></span> </div>           
        <input type="hidden" name="advanced_area" value="">
           <ul id="sidebar_filter_area" class="dropdown-menu filter_menu" role="menu" aria-labelledby="sidebar_filter_areas">
               <li role="presentation" data-value="">All Areas</li>
               <li role="presentation" data-value="east-harlem" data-parentcity="">East Harlem</li>
               <li role="presentation" data-value="greenville" data-parentcity="">Greenville</li>
               <li role="presentation" data-value="manhattan" data-parentcity="">Manhattan</li>
               <li role="presentation" data-value="northern-brooklyn" data-parentcity="">Northern Brooklyn</li>

                  .....
           </ul>        
        </div>    
</div>

Ответы

Ответ 1

Для Bootstrap 3 вы можете просто добавить "открытый" класс в раскрывающийся тег. Удаление его закрывает выпадающее меню.

$('.dropdown').addClass('open'); // Opens the dropdown
$('.dropdown').removeClass('open'); // Closes it

Это может работать в других версиях, но я не уверен.

Ответ 2

Лучший способ - проверить, не раскрывается ли раскрывающееся меню, а затем использовать .dropdown('toggle').

Пара вещей, о которых нужно знать:

  • Если вы хотите вызвать его, нажав на другой элемент, , вы должны убить событие click на другом элементе - иначе Bootstrap будет обрабатывать его как клик за пределами раскрывающегося списка и немедленно закрыть его.
  • $('.dropdown').addClass('open') не является хорошей заменой для $('.dropdown-toggle').dropdown('toggle') как предложено в других ответы, потому что это приведет к тому, что выпадающий список останется открытым вместо закрытия при нажатии на компонент.

HTML:

<button class="btn btn-secondary trigger_button">Trigger dropdown</button><br><br>
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown
  </button>
  <div class="dropdown-menu">
  Stuff...
  </div>
</div>

JS:

$('.trigger_button').click(function(e){
  // Kill click event:
  e.stopPropagation();
  // Toggle dropdown if not already visible:
  if ($('.dropdown').find('.dropdown-menu').is(":hidden")){
    $('.dropdown-toggle').dropdown('toggle');
  }
});

Пример скрипта

Ответ 3

Плагин выпадающего списка Bootstrap ждет события "click.bs.dropdown", чтобы отобразить меню, поэтому в этом случае:

$('#sidebar_filter_areas').trigger('click.bs.dropdown');

должен работать. Это не вызовет другие события 'click' для одного и того же элемента, если они есть.

Ответ 4

dropdown('toggle') отлично работает для меня при использовании тега кнопки.

JS

$("#mybutton").dropdown('toggle')

HTML

<button class="dropdown-toggle ban" role="button" data-toggle="dropdown" data-target="#" id="mybutton">...</button>

Ответ 5

Если абсолютно никто из них не делает трюк, вы можете сделать что-то вроде следующего:

$('.dropdown').addClass('open'); // substitute with your own selector
$('.dropdown-toggle').attr('aria-expanded', true).focus(); // substitute with your own selector

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

Ответ 6

Вам нужно остановить событие click от барботажа до родительских элементов

$('#sidebar_filter_city li').click(function(e){   
    $('#sidebar_filter_areas').dropdown('toggle');
    e.stopPropagation();
});

Вы также можете использовать return false;, который будет делать то же самое, но это также предотвратит нажатие кнопки.

Ответ 7

Это работает для меня.

$('.dropdown-toggle').click(function (ev) {
    ev.stopPropagation();

    $(this).parent().toggleClass('open');
});

Разметка:

<div class="dropdown pull-right">
    <button class="btn btn-default dropdown-toggle task-actions" type="button"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        <img src="{{ asset('img/site/icons/menu.svg') }}" alt="Menu">
    </button>
    <ul id="dropdown-overview" 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 role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Ответ 8

просто используйте .click() в элементе переключения данных но не забывайте e.stopPropagation()

эта одна простая линия заняла у меня часами, надеюсь, что она поможет:)

Ответ 9

большую часть времени действует как ручное действие:

$('#sidebar_filter_city li').click(function(){   
    $('#sidebar_filter_areas').click();
});

Ответ 10

Если вы открываете раскрывающееся раскрывающееся меню, вы можете увидеть селектор, который меняет отображение выпадающего меню. В bootstrap v3.0.0 css селектор:

.open > .dropdown-menu {
    display: block;
}

Таким образом, открытый класс должен быть добавлен к родительскому элементу node элемента с классом .dropdown-menu. В других версиях, если он был изменен, возможно, правильный селектор можно найти таким же образом.

Ответ 11

Попробуйте следующее: $('# sidebar_filter_areas'). click();