如何在一次點擊中隱藏div並在另一次點擊中取消隱藏？

Question

我想添加一個else語句到我的javascript，目前如果用戶點擊一個鏈接，然後一個div隱藏，但我想這樣，如果他們再次點擊鏈接div div unhides。有人可以告訴我我該怎麼做，謝謝？

<a id="myLink" href="javascript:void(0)" onclick="javascript:myLinkButtonClick();"><h3 id="bobcontent1-title" class="handcursor"><img src="assets/img/help_support/howdo.png" width="302" height="45" /></a> 

<script> 
function myLinkButtonClick() 
{ 
    $(".nswp-frame2").hide(); 
} 
</script> 

Answer 1

因爲它似乎你使用jQuery，您可以簡單地使用toggle()方法。

例如：

$('#myLink').on('click', function() { 
    $(".nswp-frame2").toggle(); 
}); 

的toggle()方法節目和可互換隱藏元件，這取決於如果元素是當前可見或隱藏。

作爲一個附註，請注意本示例如何以不顯眼的方式將處理程序與click事件綁定到on()事件，而不是您示例中的突兀（內聯）代碼。這也意味着這段代碼應該是單獨的腳本聲明的一部分，並且最好在頁面加載後執行。因此，一個更完整的例子是：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#myLink').on('click', function() { 
      $(".nswp-frame2").toggle(); 
     }); 
    }); 
</script> 

Answer 2

function myLinkButtonClick() 
{ 
    var $element = $('.nswp-frame2'); 
    if($element.is(':visible')){ 
     $element.hide(); 
    } else { 
     $element.show(); 
    } 
} 

或者，你也可以簡單地使用.toggle方法：

function myLinkButtonClick() 
{ 
    $('.nswp-frame2').toggle(); 
}