jquery - Bootstrap & jQuery - 根据 Bootstrap 下拉菜单打开或关闭切换 Div

标签 jquery twitter-bootstrap twitter-bootstrap-3

我想在 Bootstrap 下拉菜单打开时显示一个 div,并在下拉菜单关闭时隐藏相同的 div...

<小时/>

FIDDLE

<小时/>

HTML

<小时/>
<ul class="dropdown" id="flatmenu">
  <li data-toggle="dropdown" aria-expanded="true"><a href="#">Dropdown<span class="caret"></span></a></li>
  <div class="dropdown-menu fm-container" role="menu" aria-labelledby="dropdownMenu">
    Dropdown Content
  </div>
</ul>


<div class="show-me">Show Me</div>

CSS

<小时/>
body{width:400px;margin:50px auto;}
ul,li{list-style:none;margin:0;padding:0;}
.show-me{display:none;margin-top:200px;}

jQuery

<小时/>
if($('#flatmenu').hasClass('open')){
    $('.show-me').show('slow');
}else{
    $('.show-me').hide('slow');
}

最佳答案

来自bootstrap-docs :

$('#flatmenu').on('shown.bs.dropdown hidden.bs.dropdown', function () {
  $('.show-me').toggle('slow');
});

Demo

关于jquery - Bootstrap & jQuery - 根据 Bootstrap 下拉菜单打开或关闭切换 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29740888/

相关文章:

jquery - 返回 False 在 jQuery.ajax 中不起作用

javascript - Jquery 单击函数未在动态数据上调用

twitter-bootstrap - 我在 "ngx-bootstrap"和 "@ng-bootstrap/ng-bootstrap"之间感到困惑

html - 如何使图像适合特定的 div( Bootstrap )

javascript - 如何将函数参数值连接到对象文字属性名称中

javascript - Bootstrap 进度条进度

mysql - 向表中添加子行,bootstrap bootply 示例

less - Bootstrap & LESS : importing mixins only as reference

jquery - Bootstrap carousel 一次传送多个帧

javascript - JQuery UI Selectmenu 更改点击时触发