使用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>