我制作了一个不会生成链接的 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 所说的发生的 Action 被调用。
最佳答案
通过更清楚地阅读文档回答了我自己的问题。
事件
所有下拉事件都在 .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>
关于javascript - 在 Bootstrap 下拉切换中触发 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25372601/