触发jQuery上的引导下拉开关

Trigger jQuery on Bootstrap dropdown toggle

本文关键字：开关 jQuery 触发      更新时间：2023-09-26

我做了一个不会生成链接的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>

现在jQuery从来没有被调用基于Bootstrap说发生的动作

通过阅读文档更清楚地回答了我自己的问题。

事件

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

Bootstrap Documentation Here

下面的修改为我修复了它:

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>
相关文章：