web-dev-qa-db-ja.com

Bootstrapドロップダウンをプログラムで開く方法

別のドロップダウンのアイテムをクリックすると、Bootstrapドロップダウンを開こうとしています。

アイデアは、最初のドロップダウンから都市を選択することです-その後、スクリプトはエリアを含む2番目のドロップダウンを自動的に開きます（選択した都市に対応するエリアのみを表示します）。

これが私の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>
javascripttwitter-bootstraptwitter-bootstrap-3
55
Crerem

最良の方法は、ドロップダウンがまだ開いていないかどうかを確認し、.dropdown('toggle')を使用することです。

知っておくべきいくつかのこと：

  • 別の要素をクリックしてトリガーする場合、他の要素のクリックイベントを強制終了する必要があります-そうでない場合は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');
  }
});

中央の例

38
Yarin

Bootstrap 3の場合、ドロップダウンタグに「open」クラスを追加するだけです。削除するとドロップダウンが閉じます。

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

これは他のバージョンでも動作する可能性がありますが、わかりません。

23
mkandefer

Bootstrapのドロップダウンプラグインは、「click.bs.dropdown」イベントがメニューを表示するまで待機するため、この場合：

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

動作するはずです。これにより、同じ要素で他の「クリック」イベントが発生してもトリガーされません。

15
Eugene

dropdown('toggle')は、ボタンタグを使用するときに最適です。

JS

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

HTML

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

クリックイベントが親要素にバブリングするのを停止する必要があります

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

return false;を使用して同じことを行うこともできますが、これによりクリック時のデフォルトも防止されます。

4
Adam Lynch

それらのどれもがトリックを行っていない場合は、次のようなことができます：

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

上記は機能しますが、少しハックがあるので使用しないことをお勧めします。

3
adamj

bootstrap docs によると、単にこれを使用できます：

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

これは私のために動作します。

$('.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>
2
LTroya

データ切り替え要素で.click()を使用しますが、e.stopPropagation()を忘れないでください

これらの簡単な行で何時間もかかりましたが、助けになることを願っています:)

2
Peace Saravudecha

これを試してください：$（ '＃sidebar_filter_areas'）。click（）;

1
Wellington Gasparin

Bootstrap 4.xでは、次のコンポーネントを有効にする必要があります。

  • li> .nav-item .dropdown
    • a> .nav-link> aria-expanded
  • div> .dropdown-menu

クラスとブール値の切り替えをトリガーするクリックイベントリスナーをこれらのクラスに追加すると、次のように純粋なjavascriptでドロップダウンが機能します。

let status = false
const nav = document.getElementsByClassName('nav-item dropdown')[0]
nav.addEventListener('click', toggleDropdown)
function toggleDropdown () {
   if (status) {
      nav.classList.add('show')
      document.getElementsByClassName('nav-link dropdown-toggle')[0].setAttribute('aria-expanded', ' + status + ')
      document.getElementsByClassName('dropdown-menu').classList.add('show')
   } else {
      nav.classList.remove('show')
      document.getElementsByClassName('nav-link dropdown-toggle')[0].setAttribute('aria-expanded', ' + status + ')
      document.getElementsByClassName('dropdown-menu').classList.remove('show')
   }
   return status = !status
}
0
cagcak

私が使用するのが好きなものは、ユーザーが期待する動作がもう少しあります：

if(!$('#myDropdown').hasClass('show')){
  $('#myDropdown').dropdown('toggle');
}

既に開いている場合は、何もしないでください。閉じている場合は、開く必要があります。

0
Reed

開いたドロップダウンメニューを調べると、ドロップダウンメニューの表示を変更するセレクターが表示されます。 bootstrap v3.0.0のCSSセレクターは次のとおりです。

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

したがって、.dropdown-menuクラスを使用して、要素の親ノードにオープンクラスを追加する必要があります。他のバージョンでは、変更された場合、おそらく正しいセレクターが同じ方法で見つかります。

0
Hamed Mahdizadeh

ほとんどの場合、手動のアクションとして機能します：

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

次のようなネイティブJavaScriptを使用して同じことを実現できます。

 document.getElementById（ 'XYZ'）。click（ 'open'）;

すべてのブラウザで動作します。

0
Vivek Mehta

Angular 6を使用したBootstrap 4の場合、これを使用しました。

<div class="dropdown-menu" id='logoutDropDownMenu' x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 40px, 0px); top: 0px; left: 0px; will-change: transform;">

私のコンポーネントTSファイルにはこの機能があります

 import { DOCUMENT } from '@angular/common';
 import { Inject } from '@angular/core';

export class HomeComponent implements OnInit {

  private toggleLogout: boolean;

  constructor(@Inject(DOCUMENT) private document: any){}


 toggleButton() {
    if (this.toggleLogout) {
      this.document.getElementById('logoutDropDownMenu').classList.add('show');
    } else {
      this.document.getElementById('logoutDropDownMenu').classList.remove('show');
    }
    this.toggleLogout = !this.toggleLogout;

  }
0
Levijatanu