メニューの外にクリックしてもCSSドロップダウンメニューを開いたままにするには？

Question

お客様からドロップダウンメニューシステムの処理を依頼されました。私はドロップダウンとして機能するメニューを持っていますが、ドロップダウンはホバリングではなく、それらを表示するために「クリック」する必要があります。すべてのクレイジーサブメニューです。

さらに、トップレベルのナビアイテムが閉じていても、公開状態（固定状態）でメニューを保持したいと考えています。私はそれが奇妙な行動だと知っていますが、彼らが望むものです。 1つのトップナップメニュー項目はいつでも開く必要があることに注意してください。 彼らはhrefを表示するためにiframeを使用していますので、現在のところメニューの状態を保存するためのクッキーは必要ありませんが、将来的にはうれしいでしょう;） 私はjavascriptの人ではありませんコードから集めましたが、私は迷っています。私は一度にクリックしてメニューを開くことを扱うためにJSの少し変更することができましたが、一度マウスが消えたらULから外に出ました。

私はこれまでのところ、ここに私のコードを掲載しました：http://jsfiddle.net/9dJ9T/8/

クリックして滞在開くと、彼らはすべての後に「固定解除」されるまで、「固定」するとき、誰もが唯一のディスプレイにメニューを得ることができますか？理想的には、jqueryの.toggleメソッドは良いと思いますが、このメニューシステムには非常に多くのULとLIがあります。それぞれの機能を作成することは想像できません。そのような関数を抽象化してコードを単純化し、関数の巨大なリストに終わらせる方法はありますか？私はJSマスターから学びたいと思っています！

Answer 1

あなたはそのすべてを必要としません。それを作り直してください。あなたは10行のようにそれを解決することができます。

次のように追加します。onclick = "displaySubmenu（ 'someIdOrSomethingOrWhateverYouWant'）;"各タブで

jsが残りはCSSとHTMLで

function displaySubmenu(el) 
    { 
     // Hide all elements. (Easy to do) 
     // Display the needed one. (document.getElementById('yourSetedId').style.display ='block'); 
    } 

のようなものでなければなりません。

フェードを維持したいのであれば、その機能をそのままあなたのIDに設定してください。

Answer 2

簡単な部分だけで、ユーザは単にメインのコンテンツのように、任意のメニューエリア外でクリックしたときにタブが閉じてくださいどこより複雑な部分であるビットを正しいものを開いて、他の人

$(".dropTab").on("click", function(){ 
    $(".dropTab").hide(); 
    $(this).show(); 
}) 

を閉じています。

$("body").on("click",function(e) { 
    if ($(e.target).closest(".headerBar").length) { 
     return; 
    } 

    $(".dropTab").hide(); 
}); 

Answer 3

この

<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="#">Choice3</a></li> 
<li class="divider"></li> 
<li><a href="#">Choice..</a></li></ul></div> 

とJS

$('#myDropdown').on('hide.bs.dropdown', function() { 
return false; 

を}）してみてください。