如何讓div隱藏onclick並在再次點擊時顯示它？

Question

我有這樣的代碼：

<script> 
(function ($) { 
    $(document).ready(function() { 
     $("#thisclick, #thisclick2").click(function() { 
      if ($('.example').is(":hidden")) { 
       $(this).html($(this).html().replace(/Hide/, 'Show')); 
      } else { 
       $(this).html($(this).html().replace(/Show/, 'Hide')); 
      } 
      // Do it afterwards as the operation is async 
      $(".example").hide(); 
     }); 
    }); 
})(jQuery); 
</script> 

當前代碼的工作方式是，如果被點擊#thisclick它隱藏#example。這是我需要的，但是當再次點擊#thisclick時，我希望它顯示#example。使用上面的代碼，它不會工作。我該怎麼做才能做到這一點？

Answer 1

你應該能夠改變你的代碼如下所示：

(function ($) { 
    $(document).ready(function() { 
    $("#thisclick").click(function() { 
     $("#example").slideToggle("slow"); 
     }); 
    }); 
})(jQuery); 

這裏是一個快速的樣品鏈接： http://jsfiddle.net/andyjmeyers/szmXp/

Answer 2

<script> 
    (function ($) { 
      $(document).ready(function() { 
      $("#thisclick").click(function() { 
      if ($('#example').is(":hidden")) { 
       $(this).html($(this).html().replace(/Hide/, 'Show')); 

      } else { 
       $(this).html($(this).html().replace(/Show/, 'Hide')); 
      } 
      // Do it afterwards as the operation is async 
      $("#thisclick").slideToggle("slow"); 
      if($("#example").attr("isHidden") == "1") 
        $("#example").slideToggle("slow"); 
      $("#example").attr("isHidden","1"); 
      }); 
     }); 
     })(jQuery); 
     </script> 

Answer 3

你可以這樣做：

$("#thisclick").click(function() { 
    if ($('#example').hasClass("hidden")) 
    { 
     $('#example').removeClass("hidden"); 
     $('#example').show(); 
    } 
    else 
    { 
     $('#example').addClass("hidden"); 
    } 
} 

或更容易：

$("#thisclick").click(function() { 
    $('#example').toggleClass("hidden"); 
} 

定義樣式「：

.hidden 
{ display:none;} 

Answer 4

你是否期待像

<button>This click</button> 
<p style="display: none">Example</p> 

<script> 
$("button").click(function() { 
$("p").toggle(); 
}); 
</script> 

請檢查它http://jsfiddle.net/X5r8r/1107/