0

ドロップダウンメニューを作成するための次のHTMLがあります。

<li class="user-section user-section-original">
    <img class="user-image" src="{{ user.get_profile.avatar_small.url }}" height="30" width="30"/>
    <span class="name">{{ user.first_name }} {{ user.last_name.0}}.</span>
</li>
<li class="user-section-dropdown user-section hidden">
    <img class="user-image" src="{{ user.get_profile.avatar_small.url }}" height="30" width="30"/>
    <span class="name">{{ user.first_name }} {{ user.last_name.0}}.</span>
    <a href="{% url logout %}" class="dropdown-item">Log Out</a>
</li>

ユーザーがメニューをクリックするとドロップダウンし、ユーザーがもう一度クリックすると（またはドロップダウンメニュー以外の場所をクリックすると）、メニューは再び非表示になります。

これが私がこれまでに持っているものです：

$("#header li.user-section").click(function() {
    $("#header .user-section-dropdown").css('display', 'block');
    $("#header .user-section-original").css('display', 'none');
});

これにより、アカウントセクションをクリックしたときにアカウントのドロップダウンが表示されます。もう一度クリックしたり、ページ上の別のセクションをクリックしたりしたときにも表示されないようにするにはどうすればよいですか？

4

5 に答える 5

1

スタイルを直接適用するのではなく、クラスを切り替えるのが最も簡単な方法だと思います。

$("#header li.user-section").click(function() {
    $("#header .user-section-original").toggleClass("hidden");
});

次に、cssで次のような非セマンティッククラスを作成します

.hidden { display:none; }

他の場所をクリックしたときに消えるようにするには、次のことを試してください。

$(​window).click(function(e){
    var $target = $("#header .user-section-original"); 
    if( $target.hasClass("hidden");
        $target.removeClass("hidden");
})​
于 2012-07-01T13:06:48.027 に答える
0

ドキュメント全体にクリックリスナーを追加し、ドロップダウンが表示されている場合は非表示にするだけです。

$(document).click(function() {
    if($("#header .user-section-dropdown").css('display') == 'block') {
        $("#header .user-section-dropdown").css('display', 'none');
        $("#header .user-section-original").css('display', 'block');
    }
});

また、両方のケースを処理するように元の関数を変更する必要があります。

$("#header li.user-section").click(function(e) {
    if($("#header .user-section-dropdown").css('display') == 'none') {
        $("#header .user-section-dropdown").css('display', 'block');
        $("#header .user-section-original").css('display', 'none');
        e.stopPropagation()
    }
    else {
        $("#header .user-section-dropdown").css('display', 'none');
        $("#header .user-section-original").css('display', 'block');
    }
});

e.stopPropagation（）は、ドキュメントクリックハンドラーが呼び出されないようにするために使用されます。

于 2012-07-01T12:55:47.203 に答える
0

クリック機能で、以下のコードを追加できます

$('li[class$="dropdown"]').css('display', 'none')

これにより、dorpdownで終わるすべてのli要素が設定されdisplay:none、指定されたドロップダウンメニューを表示できますdisplay:block。最後に、あなたは次のようなものになります

$(".specificliclass").click(function(){
$('li[class$="dropdown"]').css('display', 'none');
$('.specificliclass').css('display', 'block')

});
于 2012-07-01T13:11:31.367 に答える
0

正しい答えが出ていることは知っていますが、このプラグインをあなたと共有したいと思います：http: //benalman.com/projects/jquery-outside-events-plugin/

これは、要素の外側のクリックをバインドする単純なプラグインです。このバインド関数内で、要素が表示されているか非表示になっているかを確認するだけです。見える、隠す。

于 2012-07-01T13:47:23.420 に答える
0

簡単です。メニューでstopPropagationを使用し、「document」クリックイベント「removeClass」メソッドを指定します。
ヒント：全身を左/右に移動するには、メニューと一緒に「body」要素を移動します。この方法を適用しました。一日かかった!! ある日。

$('.button').bind('click', function(e) {
    e.stopPropagation();
    $('.menu').toggleClass('slide');
});


// slide out when click other parts of current page

$(document).click(function(){
    $('.menu').removeClass('slide-in');
});
于 2013-11-12T09:15:54.003 に答える