jquery - Jqueryの表示/非表示の修正

Question

この小さなコードを修正する必要があります：

jQuery(document).ready(function() {

    $('.plus').click(function(){
        $('#top:hidden').show('slow');
        $('.plus').click(function(){
            $('#top:visible').hide('slow');

        });
    });
});

Answer 1

代わりにこれを試してください：

jQuery(document).ready(function() {
    $('.plus').click(function(){
        $('#top').toggle('slow');
    });
});

'.plus'つまり、要素がクリック'#top'されるたびに、要素は表示と非表示の間で切り替えられます。

質問に示されているコード'.plus'は、クリックされたときに'#top'表示され（現在表示されていない場合）、次に非表示にする2番目のクリックハンドラーを割り当てることを示しています'#top'。次のクリックで、これらのハンドラーの両方が実行され、3番目のハンドラーが作成されます。次のクリックで、3つのハンドラーすべてが実行されます。などなど。つまり、.click()ハンドラーを追加するために繰り返し呼び出されても、以前のハンドラーは置き換えられません。

Answer 2

あなたはtoggle()交換するために使用するhide()ことができますshow()

$('.plus').click(function(){
   $('#top').toggle('slow');
})

APIリファレンス：http ：//api.jquery.com/toggle/

Answer 3

クリックを2回バインドする必要はなく、条件を設定して表示と非表示を切り替えることができます。

$('.plus').click(function(){
    if($('#top').is(':visible')
         $('#top').hide('slow');
   else
         $('#top').show('slow');        
});

toogleイベントも使用できます

$('.plus').toggle(function(){
      $('#top').show('slow');
},  
function(){
       $('#top').hide('slow');
});