Bootstrap＆amp; jQuery - 根据Bootstrap Dropdown菜单打开或关闭切换Div

Question

我想在Bootstrap Dropdown打开时显示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');
}

Answer 1

来自bootstrap-docs：

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

Demo

Answer 2

您可以针对其预期的元素执行.click()，并使用div效果代替将显示/隐藏的$("#flatmenu").click(function () { $('.show-me').toggle('slow'); }); 。

代码段：

{{1}}

.toggle()

Answer 3

您可以尝试更新fiddle

代码：

$('#flatmenu').on('click',function(){
    $this = $(this);
    setTimeout(function(){
        if($this.hasClass('open')){
            $('.show-me').show('slow');
        }else{
            $('.show-me').hide('slow');
        }
    },100);
});