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

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

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

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

3 个答案: