0

マウスのクリックで開き、マウスのクリックまたはドキュメントのクリックで閉じるjQueryを使用して、単純なドロップダウンを作成しようとしています。それを機能させるための次のJSコードがあります。http://jsfiddle.net/4mCsy/1/で私のコードを参照してください。しかし、コードは機能していません:-

var x=0;
if(x==0){
    $(".notification").click(function(){
        $(".drpdwn").css("display","block");
    });
    x=1;

}
if(x==1){
    $(".notification").click(function(){
        $(".drpdwn").css("display","none");
    });
    x=0;

}

しかし、コードを次のように変更すると（コードの下部を削除します）（http://jsfiddle.net/4mCsy/2/）、コードはドロップダウンを開くだけで部分的に機能します。しかし、閉じません（明らかに）：-

var x=0;
if(x==0){
    $(".notification").click(function(){
        $(".drpdwn").css("display","block");
    });
    x=1;

}

どこが間違っているのか教えてください。どんな助けでも大歓迎です。

4

3 に答える 3

2

彼らは、最近の jQuery バージョンでこれを行うことを少ししました:

jQuery トグル()

$(document).on('click', '.notification', function() {
    $('.drpdwn').toggle(); 
});

の子メンバーである.drpdwnためにトグルしているドロップダウン自体を除外する場合は、特定の条件から除外する必要があります。.notificationevent.target

$(document).on('click', '.notification', function( event ) {
   if ( event.target.className != 'drpdwn' )
       $('.drpdwn').toggle();
});

デモ

そうしないと、2 つ<div>の を分離する必要があります。前に説明したように、これらは互いのメンバーだからです。したがって、jQuery セレクターは<div>、 をクリックすると両方のをリッスンします.notification。これを防ぐには、HTML を次のように再構築します。

<!-- Notification Click -->
<div class="notification">
    Notification
</div>

<!-- Dropdown Div -->
<div class="drpdwn">
</div>
于 2013-10-02T10:40:56.160 に答える
1 
$(".notification").on('click',function(){
  $(".drpdwn").toggle();
});

デモ

更新しました：

<div class="notification">Notification</div>
<div class="drpdwn"></div>
$(".notification").on('click', function () {
    $(".drpdwn").toggle('slow');
});

デモ 2

于 2013-10-02T10:46:03.703 に答える
0

今のところ、クリックしたときにドロップダウンを開く必要があるが閉じないことを指定しているだけです。toggle()したがって、ドロップダウンを開いたり閉じたりするために使用できます。

<div class="notification">Notification</div>
<div class="drpdwn"></div>
$(".notification").on('click',function(){
     $(".drpdwn").toggle('blind', 'options', 500 );
});

リンクは次のとおりです。http://jsfiddle.net/coolshivster/4mCsy/25/

于 2013-10-02T12:28:35.873 に答える