Javascript：第二次单击按钮时隐藏内容

Question

我正在编写一个简单的脚本来使内容可见/不可见。 第二次单击按钮时，内容必须变为不可见。

当前项目位于：http://mijnronse.be/index.php 请参阅“Groepen”和“Cadeaubon”按钮。

这是当前脚本：

<script>

$(document).ready(function(){
    $(".kruisje").click(function(){
        $(".tekstgroepen").hide();
		$(".kruisje").hide();
    });
    $("#knopgroepen").click(function(){
        $(".tekstgroepen").show();
		$(".kruisje").show();
		$(".tekstcadeaubon").hide();
		$(".kruisje2").hide();
    });
	$(".kruisje2").click(function(){
        $(".tekstcadeaubon").hide();
		$(".kruisje2").hide();
    });
	 $("#knopcadeaubon").click(function(){
        $(".tekstcadeaubon").show();
		$(".kruisje2").show();
		$(".tekstgroepen").hide();
		$(".kruisje").hide();
    });
 });
</script>

所以当我单击按钮#knopgroepen 时，文本和十字按钮都变得可见。

我想知道如何通过再次单击按钮使文本和十字不可见。

有什么帮助吗？ 提前致谢！

Answer 1

使用.toggle() 而不是.show()

$(document).ready(function () {
    $(".kruisje").click(function () {
        $(".tekstgroepen").hide();
        $(".kruisje").hide();
    });
    $("#knopgroepen").click(function () {
        $(".tekstgroepen").toggle();
        $(".kruisje").toggle();
        $(".tekstcadeaubon").hide();
        $(".kruisje2").hide();
    });
    $(".kruisje2").click(function () {
        $(".tekstcadeaubon").hide();
        $(".kruisje2").hide();
    });
    $("#knopcadeaubon").click(function () {
        $(".tekstcadeaubon").toggle();
        $(".kruisje2").toggle();
        $(".tekstgroepen").hide();
        $(".kruisje").hide();
    });
});

Answer 2

使用toggle()

$("#knopgroepen").click(function(){
        $(".tekstgroepen").toggle();
        $(".kruisje").toggle();
        $(".tekstcadeaubon").hide();
        $(".kruisje2").hide();
    });

Answer 3

而不是使用显示/隐藏使用切换。

$("#knopgroepen").click(function(){
    $(".tekstgroepen").toggle();
    $(".kruisje").toggle();
    $(".tekstcadeaubon").hide();
    $(".kruisje2").hide();
});