在Bootstrap下拉開關上觸發jQuery

Question

我創建了一個不會生成鏈接的bootply，因此這是我在其中進行的設置。

我想讓jQuery在觸發此下拉菜單時向另一個div添加一個類，並在隱藏下拉菜單時刪除該類。

CSS：

.halfOpacity
  {
    opacity: .5;
  }
#switchMenu
  {
    top: 100px;
  }
#siteData
  {
    color: #FFF;
    background-color: #000;
  }

使用Javascript：

$('#switchDropdown').on('show.bs.dropdown', function(){
  $('#siteData').addClass('halfOpacity');
});
$('#switchDropdown').on('hide.bs.dropdown', function(){
  $('#siteData').removeClass('halfOpacity');
});

HTML：

<a href="#" class="navbar-brand dropdown-toggle mobile-footer-brand" data-toggle="dropdown" id='switchDropdown'>Test Link</a>

<ul class='dropdown-menu' id='switchMenu'>
  <li>HORRAY!!!!</li>
</ul>

<div id='siteData'>Some Stuff<br>Moar stuff<br>Even moar stuffs</div>

現在，從未根據Bootstrap所說的動作調用jQuery。

Answer 1

閱讀文檔更清晰地回答了我自己的問題。

活動

所有下拉事件都在.dropdown-menu的父元素上觸發。

引導文檔在這里

以下更改為我修復了此問題：

使用Javascript：

$('#wrap').on('show.bs.dropdown', function(){
  $('#siteData').addClass('halfOpacity');
});
$('#wrap').on('hide.bs.dropdown', function(){
  $('#siteData').removeClass('halfOpacity');
});

HTML：

<div id='wrap'>
<a href="#" class="navbar-brand dropdown-toggle mobile-footer-brand" data-toggle="dropdown" id='switchDropdown'>Test Link</a>

<ul class='dropdown-menu' id='switchMenu'>
  <li>HORRAY!!!!</li>
</ul>
</div>
<div id='siteData'>Some Stuff<br>Moar stuff<br>Even moar stuffs</div>