点击链接时Jquery显示div答案

【问题标题】：Jquery show div when link gets clicked点击链接时Jquery显示div
【发布时间】：2015-07-16 14:21:23
【问题描述】：

我试图在单击链接时使用 jquery 显示/隐藏 div。我把它放在我的头部：

<script type="text/javascript"> 
  $("#attach_box").click(function {
    $("#sec_box").show()
    });        
</script>

我有一个如下所示的链接：

<a href="#" id="attach_box">+ Add a Postal Address (If Different)</a>

还有一个看起来像这样的 div：

<div id="sec_box" style="display: none;">
Hello world!!               
</div>

这不起作用，我不知道为什么。有什么想法吗？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您需要在document.ready 中附加click 处理程序，以确保浏览器已加载DOM 并且所有元素都可用：

<script type="text/javascript"> 
   $(function() {
       $('#attach_box').click(function() {
           $('#sec_box').show();
           return false;
       });        
   });
</script>

另外，您忘记在 click 处理程序中的匿名函数旁边加上括号 ()。

【讨论】：

我还会在函数末尾添加return false;，这样# 就不会出现在该位置，但这只是个人喜好。
效果很好。知道当用户第二次单击链接时如何隐藏 div 吗？
@Thomas，是的，试试$('#sec_box').toggle();

【解决方案2】：

DOM 可能还没有完全加载。

   <script type="text/javascript"> 
      $(document).ready(function()
      {  
         $("#attach_box").click(function() {
         $("#sec_box").show()
         });  
       });      
   </script>

把它放在你的脑海里，然后把你的初始化代码放在那里。

【讨论】：