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'元素在可见和不可见之间都会toggled。

问题中显示的代码表示，点击'.plus'后，'#top'可见（如果当前不可见），然后分配第二个点击处理程序'#top'无形。在下一次单击时，将运行这两个处理程序，创建第三个处理程序。在下一次单击时，所有三个处理程序都会运行等等。也就是说，重复调用.click()会添加其他处理程序，它们不会替换以前的处理程序。

Answer 2

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

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

您也可以使用toogle event

$('.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/

Jquery显示/隐藏修复

3 个答案: