解決bootstrap下拉選單無法隱藏的問題
阿新 • • 發佈：2019-01-21
下拉選單的兩種實現
想必大家都知道，bootstrap為我們提供了一個下拉選單的元件，官方也為我們提供兩種使用方法
1.標籤指定data-toggle
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主題
<span class="caret"></span>
</button>
<ul class="dropdown-menu" 2.js呼叫dropdown(‘toggle’)方法
<div class="dropdown">
<a href="#" class="dropdown-toggle" id="dropdownMenu1" >
主題
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">資料探勘</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">資料通訊/網路</a>
</li>
</ul>
<button id="test">test</button>
</div>
</body>
<script>
$(function() {
$("#test").click(function() {
$(".dropdown-toggle").dropdown('toggle');
})
})
</script>第二種方法有個很嚴重的問題
就是，下拉選單開啟後，官方並沒有提供將它隱藏的方法，網上的方法死活說再次呼叫dropdown(‘toggle’)。。。反正我不行。
那麼我想用點選之外來開啟下拉選單呢？（必須得使用JS來控制）
我想到一個方法，使用jQuery提供的一個效果slideUp(),slideDown()
<body>
<div class="dropdown">
<a href="#" class="dropdown-toggle" id="dropdownMenu1" >
主題
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">資料探勘</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">資料通訊/網路</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">分離的連結</a>
</li>
</ul>
<button id="test">test</button>
<button id="test1">test1</button>
</div>
</body>
<script>
$(function() {
$("#test").click(function() {
$(".dropdown-menu").slideUp();
})
$("#test1").click(function() {
$(".dropdown-menu").slideDown();
})
})
</script>好了現在能實現開和關了，但是速度有點慢？沒事slide可以通過引數調節速度甚至還有回撥函式來替代$(selector).on("hidden.bs.dropdown', function () {})（對下拉選單收回時間的監聽），滿分！
$(selector).slideUp(speed,callback)
- speed 可選。規定元素從可見到隱藏的速度（或者相反）。預設為 “normal”。 可能的值：
- 毫秒 （比如 1500）
- “slow”
- “normal”
- “fast”
在設定速度的情況下，元素從可見到隱藏的過程中，會逐漸地改變其高度（這樣會創造滑動效果）。
- callback
可選。slideUp 函式執行完之後，要執行的函式。 除非設定了 speed 引數，否則不能設定該引數。