0

ブートストラップ ボタンのドロップダウン ( http://twitter.github.io/bootstrap/components.html#buttonDropdowns )に似たものを実現しようとしていますが、軽量なものが必要です。基本的な機能は多かれ少なかれ次のとおりです。

  • リンクをクリックすると、対応するドロップダウン div が開きます (機能します)。
  • 別のリンクをクリックすると、前のドロップダウンが閉じ、css クラスが削除されます (機能します)。
  • 開いたドロップダウンのリンクをクリックすると、ドロップダウンが閉じます (機能しません (閉じて再度開く))。
  • 本文のどこかをクリックすると（リンクとドロップダウンの外側）、ドロップダウンを閉じます（機能しません）

この背後にあるロジックは何ですか？

デモ: http://jsfiddle.net/fU2BZ/

以下のコードは意味がありますか？

$(document).click( function(){
    $('.dropdownbox').hide(0);
    $('.dropdown').removeClass('active');
});

$('.dropdown').click( function(event){        
    event.stopPropagation();
    $('.dropdown').removeClass('active');
    $('.dropdownbox').hide();
    $(this).addClass('active').find('.dropdownbox').slideToggle(200);
});
4

3 に答える 3

4

コードにいくつかの変更を加え、if else ロジックを追加して、動作しているようです。

フィドル: http://jsfiddle.net/fU2BZ/1/

コード：

$('.dropdown').click( function(event){        
event.stopPropagation();

if ($(this).hasClass("active")) {
    $('.dropdown').removeClass('active');
    $('.dropdownbox').hide();
} else {
    $('.dropdownbox').hide();
    $(this).addClass('active').find('.dropdownbox').slideToggle(200);
}
});
于 2013-05-02T15:39:20.977 に答える
2

3 番目の問題を解決するための簡単なコード:

$('.dropdown').click(function (event) {
    event.stopPropagation();
    $('.dropdown').removeClass('active').not(this).find('.dropdownbox').hide();
    $(this).toggleClass('active').find('.dropdownbox').slideToggle(200);
});

最後の問題を解決するには、次のようにします。

$('.dropdownbox').click(function (event) {
    event.stopPropagation();
});
于 2013-05-02T16:13:07.733 に答える