bootstrapプルダウンメニューが隠しられない問題を素早く解決します。
プルダウンメニューの2つの実装
ご存知のように、bootstrapは私達にプルダウンメニューのセットを提供してくれました。公式も二つの使い方を提供してくれます。
1.ラベル指定data-togg le
つまり、プルダウンメニューがオープンした後、それを隠す方法は公式に提供されていません。ネット上では、再びドラフトを呼び出す方法があります。どうせだめです。
クリックした外来でプルダウンメニューを開きたいですか?JSを使ってコントロールしなければなりません)
一つの方法を思いついたのですが、jQueryを使って提供された一つの効果sledUp()、sleddown()
ミリ秒(たとえば1500)
「slow」
「normal」
「fast」
速度を設定すると、元素は見えないところから徐々に高さを変えます。
calback
オプション。sledUp関数が実行された後に実行する関数です。speedパラメータが設定されていない限り、このパラメータは設定できません。
以上のこの快速解決bootstrapメニューでは隠しられない問題は、小編集が皆さんに提供した内容の全部を共有しています。参考にしていただければと思います。どうぞよろしくお願いします。
ご存知のように、bootstrapは私達にプルダウンメニューのセットを提供してくれました。公式も二つの使い方を提供してくれます。
1.ラベル指定data-togg le
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > / </a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </a>
</li>
</ul>
</div>
2.js dropdownの呼び出し方法
<div class="dropdown">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > / </a>
</li>
</ul>
<button id="test">test</button>
</div>
</body>
<script>
$(function() {
$("#test").click(function() {
$(".dropdown-toggle").dropdown('toggle');
})
})
</script>
二つ目の方法は深刻な問題があります。つまり、プルダウンメニューがオープンした後、それを隠す方法は公式に提供されていません。ネット上では、再びドラフトを呼び出す方法があります。どうせだめです。
クリックした外来でプルダウンメニューを開きたいですか?JSを使ってコントロールしなければなりません)
一つの方法を思いついたのですが、jQueryを使って提供された一つの効果sledUp()、sleddown()
<body>
<div class="dropdown">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > / </a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </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>
はい、今はオンとオフができますが、スピードがちょっと遅いです。大丈夫です。sladeはパラメータの調節速度を使って、さらにはコールバック関数を使って、ドル(selector)の代わりにon(「hidden.bs.dropdown」、function(){}(プルダウンメニューの回収時間のモニター)を使って、満点です。
$(selector).slideUp(speed,callback)
speedオプションです。要素が見えて隠れている速度(または反対)を指定します。デフォルトは「normal」です。可能な値:ミリ秒(たとえば1500)
「slow」
「normal」
「fast」
速度を設定すると、元素は見えないところから徐々に高さを変えます。
calback
オプション。sledUp関数が実行された後に実行する関数です。speedパラメータが設定されていない限り、このパラメータは設定できません。
以上のこの快速解決bootstrapメニューでは隠しられない問題は、小編集が皆さんに提供した内容の全部を共有しています。参考にしていただければと思います。どうぞよろしくお願いします。