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() instead of .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

而不是使用 show/hide 使用切换。

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

Javascript: 第二次点击按钮时隐藏内容

Javascript: hiding content when clicking a button for the second time

html

javascript

php

jquery

button