Скрытие и отображение div с помощью jQuery

Question

У меня есть div, который должен скрываться при нажатии. Затем, если вы нажмете на него снова, он покажет себя. Затем, если вы снова нажмете на него, он снова спрячется, и так далее и т. Д.

Когда он щелкнут в первый раз, он проверяет, истинна ли переменная $ visible или нет. Если $ visible истинно, оно скроет его, а затем установите значение $ visible равным null. Else, если $ visible не соответствует действительности, он покажет его, а затем установите значение $ visible равным true. Но по какой-то причине это не будет сделано.

Я уверен, что я сделал что-то неправильно, поэтому, пожалуйста, посмотрите на мой код:

<div id="id">Hello</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script type="text/javascript"> 
    //************************************************************* 
    function hideOnClick($id) { 
    $("#" + $id).click(function() { 
     $(this).hide(); 
    }); 
    } 

    function showOnClick($id) { 
    $("#" + $id).click(function() { 
     $(this).show(); 
    }); 
    } 

    //************************************************************* 

    $(document).ready(function() { 
    $id = "id"; 
    $visible = "true"; 

    $("#" + $id).click(function() { 
     if ($visible == "true") { 
     hideOnClick($id); 
     $visible = null; 
     } else { 
     showOnClick($id); 
     $visible = "true"; 
     } 
    }); //end of $("#"+$id).click(function()  
    }); //end of $(document).ready(function() 

    //************************************************************* 
</script> 

Результаты:

First click on div #id: Nothing happens. 
Second click on div #id: #id hides itself 
Third click on div #id: Nothing happens. Doesn't show itself again. 
Fourth click on div #id: Nothing happens. Doesn't show itself again. 
Fifth click on div #id: Nothing happens. Doesn't show itself again. 
And this continues on indefinitely... 

Answer 1

Во-первых, позвольте мне сказать, что jQuery already has a feature for that, named .toggle.

Во-вторых, если вы скрываете div, его больше нет на вашей странице, поэтому вы не сможете щелкнуть по нему.

Итак, если вы хотите сделать это, вам нужно будет использовать CSS opacity: 0, или visibility: hidden. Например:

$(this).css('visibility', 'hidden'); // to hide 
$(this).css('visibility', 'visible'); // to show 

Answer 2

Вы можете использовать JQuery в тумблер класс:

$("#myID").click(function(){ 
     $("#myID").toggleClass("visible"); 
    }); 

Если у вас есть класс с именем видимым:

.visible{ 
    visibility: hidden; 
} 

Answer 3

Вы также можете сделать это без создания кнопки:

$(":not(#div)").click(function(){$('#div').show();}); 

вместо:

$("#div").click(function(){$('#div').show();}); 

скрыть часть:

 $("#div").click(function(){$(this).hide();});