使用jQuery盲目功能顯示div

Question

我是jQuery的新手，並嘗試在用戶單擊按鈕時顯示div。該按鈕位於文本下方，可以上下移動。

我嘗試了幾件事，但無法解決它。

這是我的代碼：

HTML

<div class="travel_infobox"> 

</div> 
<div class="clearfix"></div> 
<div class="travel_info_button"> 
<a href="#" target="_blanc">InfoBox</a> 
</div> 

jQuery的

<script> 
    $(document).ready(function(){ 
     $("input.show").click(function(){ 
     $(".travel_infobox").show("blind"); 
    }); 
    }); 

    $(document).ready(function(){ 
     $("input.hide").click(function(){ 
     $(".travel_infobox").hide(blind); 
    }); 
    }); 

</script> 

Answer 1

你必須使用$(document)ready(function() {});只是一個時間，需要讓jQuery的知道什麼時候該頁面完全加載運行你的代碼。

然後，那input.show我想有一個輸入按鈕show類的地方，否則它不起作用。

<script> 
    $(document).ready(function(){ 
     $("input.show").click(function(){ 
      $(".travel_infobox").show("blind"); 
     }); 
     $("input.hide").click(function(){ 
      $(".travel_infobox").hide("blind"); 
     }); 
    }); 
</script> 

Answer 2

試試這個。您的顯示和隱藏按鈕在哪裏？所以我添加了一個。

<div class="travel_infobox"> 
Trave info 
</div> 
<div class="clearfix"></div> 
<div id="travel_info_button"> 
<a href="#" target="_blank">InfoBox</a> 
</div> 
<button id='show'>show</button> 
<button id='hide'>hide</button> 
<script> 
    $(document).ready(function(){ 
      $("#show").click(function(){ 
      $(".travel_infobox").show("blind"); 
     }); 
     }); 

     $(document).ready(function(){ 
      $("#hide").click(function(){ 
      $(".travel_infobox").hide("blind"); 
     }); 
     }); 
</script>