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'可见（如果当前不可见），然后分配第二个单击处理程序，该处理程序将使'#top'不可见。在下一次单击时，这两个处理程序都将运行，创建第三个处理程序。在下一次单击时，所有三个处理程序都会运行。等等。也就是说，重复调用以.click()添加其他处理程序，它们不会替换以前的处理程序。

Answer 2

您不需要绑定两次单击，而是可以设置条件显示和隐藏。

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

你也可以使用togle事件

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

Answer 3

您可以使用toggle()来替换hide()和show()

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

API 参考：http ://api.jquery.com/toggle/