Bootstrap和jQuery - 根據Bootstrap下拉菜單打開或關閉切換Div

Question

我想在Bootstrap Dropdown打開時顯示div，並在下拉關閉時隱藏相同內容...

---

小提琴

---

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');
});

演示

Answer 2

你可以這樣做.click()的元素，它的目標用戶和使用.toggle()的效果div是要顯示/隱藏代替。

代碼段：

$("#flatmenu").click(function () {
    $('.show-me').toggle('slow');
});

JsFiddle演示

Answer 3

你可以嘗試這個更新的小提琴

碼：

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