当链接被点击时，Jquery显示div

Question

我想在点击链接时使用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>

这个代码不起作用，我无法弄清原因。有任何想法吗？

- Thomas

Answer 1

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

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

还有你忘了在 click 处理程序中的匿名函数旁边加上括号()。

- Darin Dimitrov

---

我还会在函数末尾添加return false;，这样#就不会出现在位置中，但这只是个人偏好。 - Daniel Schaffer

那个运行得很好。你有什么想法，我怎么才能在用户第二次点击链接时隐藏div？ - Thomas

@Thomas，是的，请尝试$('#sec_box').toggle();。 - Darin Dimitrov

Answer 2

有可能DOM尚未完全加载。

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

把它放在你的脑子里，然后把你的初始化代码放进去。

- Chris Kooken