ブートストラップ - サブメニューが開いているときにドロップダウンメニューを開く方法

Question

サブメニューをクリックしたときにドロップダウンメニューを開いたままにするのが難しいです。あなたは、ブートストラップがこれを箱の外で行うと思います。しかし、私はそれについてのドキュメントを見つけることができません。ここ

は私が解決策として、見つけたものです：私のHTMLで https://www.bootply.com/rgvY6oPO1J

私はこの持っている：いただきました私のJavaScriptで

<div class="btn-group" id="myDropdown"> 
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
    Menu 
    <span class="caret"></span> 
    </a> 
    <ul class="dropdown-menu"> 
    <li><a href="#">Choice1</a></li> 
    <li><a href="#">Choice2</a></li> 
    <li><a href="#" id="btn-mynumbers" data-toggle="collapse" data-target="#mynumbers" aria-expanded="false">Numbers</a> 
     <ul class="nav collapse" id="mynumbers" role="menu" aria-labelledby="btn-mynumbers"> 
     <li><a href="">1</a></li> 
     <li><a href="">2</a></li> 
     <li><a href="">3</a></li> 
     <li><a href="">4</a></li> 
     <li><a href="">5</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Choice3</a></li> 
    <li class="divider"></li> 
    <li><a href="#">Choice..</a></li> 
    </ul> 
</div> 

そして、ここでは、次のとおりですため

$("#btn-mynumbers").on("click", function (e) { 
    e.stopPropagation(); 
    $("#mynumbers").slideToggle("fast"); 
}); 

をほとんどの部分は動作します。しかし、私は多くのメニュー項目を持つつもりです。私は、作成したすべてのサブメニューに対して、クリックした呼び出し元を作成したくありません。

だから私はonclickの=

を入れてみました "トグル（この）;"

のid = "BTN-mynumbers"

や関数を作成：

function Toggle(element) { 
    event.stopPropagation(); 
    var parentid = element.id; 
    var childid = $(parentid).children("ul").attr("id"); 
    $(childid).slideToggle("fast"); 

} 

ので、私はする能力をクリックし、すべてのサブメニューを与えることができます開けておいて。イベントはすべての伝播を停止しました。それはslideToggleです。私はサブメニューが滑り落ちるときにドロップダウンを開いたままにする方法を知らない。

Answer 1

event以降の機能でエラーが発生したようですが、おそらく未定義です。私はそれを以下のように変更しました。しかし、あなたは下のcodepenリンクを使って実際にそれを見ることができます。

$(".submenu").on("click", function (event) { 
    event.stopPropagation(); 
    var target = event.currentTarget; 
    $(target).siblings('ul').slideToggle("fast"); 
}); 

サブメニューを持つ可能なすべてのメニュー項目にidを入れずにクラスを操作するのが最善の方法です。そうすれば、あなたは再コード化する必要はありません。

idsの代わりにクラスを識別子として使用する方法を示した0​​を作成しました。私はあなたと一緒に遊ぶためのサブメニュー付きの別のメニュー項目のサンプルを追加しました。

希望に役立ちます！