javascript - 在 JQuery 中使用一个按钮打开/关闭的问题

Question

嘿伙计们，我正在尝试制作一个按钮，该按钮将根据第一次是否被单击来打开和关闭-如果第二次单击它会打开-它会关闭并重置。

这是我到目前为止的代码-它只会打开而不会关闭：

var val;
$(".confirmed").click(function(){
    if (val == 1){
        hide(); 
    }
    val = 1;
    $(".confirmedtable").show();
    $(".searchconfirmed").show();
});

function hide(){

            $(".confirmedtable").hide();
            $(".searchconfirmed").hide();
            val = 0;

}

谢谢

Answer 1

您可以使用 jquery 中的 toggle() 函数来执行此操作。见：http ://api.jquery.com/toggle/

$('#button').click(function() {
    $('#div_to_show_hide').toggle('slow', function() {
        // Animation complete.
    });
});

如果当前隐藏元素，则切换将显示元素，如果当前显示元素，则隐藏元素。

Answer 2

$(".confirmed").click(function(){
    $(".confirmedtable, .searchconfirmed").toggle();
});

小提琴

Answer 3

作为toggle()基于答案的替代方案：

$('.confirmed').click(function(){
    $('.confirmedtable, .searchconfirmed')[$('.confirmedtable').is(':visible') ? 'hide' : 'show']();
});

JS 小提琴演示。

不过，它充其量只是一种选择。该toggle()方法更简洁。