0

メニューアイコンをクリックすると開くか閉じるかを切り替えるグローバルスタイルのドロップダウンを作成しようとしていますが、ページ上の他の場所をクリックすると閉じることもできます。このドロップダウンを開いたり閉じたりする方法は、ドロップダウンの親に「open」というクラスを追加または削除することです。

（より明確にするために）その考え方は、ドロップダウンの通常のクラスに次のように表示されることです。その上に設定されますが、クラスが「open」の子孫である場合は、display：block;があります。

ですから、これまでのところ、これまでのところ、「openable」は「open」クラスを追加するためにクリックできる「親」要素のクラスです。

<script>
$(document).ready(function(){
    $('.openable').click(function(){
        if($(this).hasClass("open")){
            $(this).removeClass("open");
        }
        else{
            $(this).addClass("open");
        }
    });
});

それ自体で実際に正常に機能します-ドロップダウンに対して十分に適切なトグルとして機能します。もちろん、他の場所をクリックしてもドロップダウンは閉じません。

私の明らかに機能していないクローズスクリプトは次のとおりです。

<script>
$(document).ready(function(){
    $(document).click(function(event) {
        var clicked = $(event.target);
            if(clicked.hasClass(".open")){
        }
        else{
            if($(".open").length > 0){
                $(".open").each(function(){
                    $(this).removeClass("open");
                });
            }
        }
    });
});
</script>

そのスクリプトがページにあると、ドロップダウンは完全に機能しなくなり、コンソールは私が作業するためのエラーをスローしません。

これを行うためのより良い方法はありますか？

ありがとう

編集：htmlマークアップは次のようなものです

<li class="navItem dropdown openable">
<span><img src="img/settings.png"></span>
  <ul class="subNav hubDrop">
    <li>Nav item 1</li>
    <li>Nav item 2</li>
    <li>Nav item 3</li>
    <li>Nav item 4</li>
</ul>
        </li>

それぞれについて。別のul内にあるliタグ（これは基本的にドロップダウンメニュー用であることを忘れないでください）

4

4 に答える 4

1

jsFiddleデモ-HTMLを提供していないので、いくつかの要素をモックアップしました...

更新：一度に複数の要素を「開く」ことができるかどうかを指定しません。現在のソリューションではそうなる可能性があるので、私はその動作を維持しました。ただし、開いているものに制限するには、クリックハンドラー$('.open').not(this).removeClass('open');内に追加できます。.openable

パート1：なぜ単に使用しないのですか.toggleClass

$(document).ready( function() {
    $('.openable').click( function() {
        $(this).toggleClass("open");
    });
});

パート2：2番目の準備完了ハンドラーは必要ありません。最初に、これを追加します：

$(document).click( function(e) {
    var clicked = $(e.target).closest('.openable');
    if ( clicked.length == 0 ) {
        $(".open").removeClass('open');
    }
});
于 2012-09-26T22:34:10.703 に答える
1

jsBinデモ

少し遊んだだけです（マークアップがわかりません）。

<div>
<h2 class="openable">ICON 1</h2>
<div class="cont"></div>
</div>

$('.openable').next('.cont').hide();
$('.openable').click(function(e) {
    e.stopPropagation();
    $('.opened').removeClass('opened');
    var d = $(this).next('.cont');
    var visib = (d.is(':visible')) ?
       /*yes*/   d.slideUp() :
       /*no */  ($('.cont').slideUp()) (d.slideDown().prev('.openable').addClass('opened')) ;
});

$(document).click(function(){
    $('.cont:visible').slideUp().prev('.openable').removeClass('opened');
});
于 2012-09-26T22:26:03.247 に答える
0

私はあなたがただできるとは思わない$(document).click()、それは間違いではないが、あなたは決して文書自体をクリックすることはなく、あなたはの子をクリックする。

私は非常によく似たメニューシステムを持っており、次のようにイベントをキャプチャします。

 $('.navTab').mouseover(function (event) { navEvent($(this), event.type); });

次に、すべての「開く」を削除し、選択したアイテムに「開く」を再適用します。

すべてのドキュメントクリックイベントをキャプチャする必要はないと思います。 jQuery Event.target

于 2012-09-26T22:20:14.117 に答える
0

開くことができるクラス化された要素以外のすべてにクリックメソッドを実行させるのはどうですか？

var openable = $(".openable");
$("div, h2").not(openable).click(function(){
    $('.cont').slideUp().prev('.openable').removeClass('opened');
});
于 2012-09-26T22:32:06.970 に答える