jquery实现单击显示隐藏层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link charset="text/css" href="css/index.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script language="javascript" type="text/javascript" >
$(function(){
   $("#show h3").bind("click",function(){
   $(this).next("div.content").show();
   });
   });
</script>
</head><body oncontextmenu=self.event.returnValue=false onselectstart="return false"><div id="divbox">
<div id="inner">
  <div id="show">
  <h3>first</h3>
  <div class="content">此处显示新 Div 标签的内容</div>
</div>
  <div id="show">
  <h3>first</h3>
  <div class="content">此处显示新 Div 标签的内容</div>
</div>
  <div id="show">
  <h3>first</h3>
  <div class="content">此处显示新 Div 标签的内容</div>
</div>
  <div id="show">
  <h3>first</h3>
  <div class="content">此处显示新 Div 标签的内容</div>
</div>
  <div id="show">
<h3>first</h3>
  <div class="content">此处显示新 Div 标签的内容</div>
</div>
  <div id="show">
  <h3>first</h3>
  <div class="content">此处显示新 Div 标签的内容</div>
</div></div>  
</div>
</body>
</html>
我想单击带有<h3>的div的时候，他里面的那个div层隐藏显示，为什么我上面绑定的事件不行呢？请高手帮帮忙

解决方案 »

  1.   


    $(function(){
                               $("h3").bind("click",function(){
                                                       $(this).next("div.content").show();
                                                       });
                               });
      

  2.   

    应为你的<div id="show">
    重复了，所以不行
      

  3.   

    是没有显示吗？
    你的div本身就是现实的，
    你把
    $(this).next("div.content").show(); 
    改为$(this).next("div.content").hide(); 
    试下
      

  4.   

    把<div id="show">
    改为<div showid="show">$(function(){
         $("[showid=show] h3").bind("click",function(){
               $(this).next("div.content").show();
         });
    });
      

  5.   

    我的.content这个层本身是隐藏的 visibility:hidden;就是想叫他显示呢
      

  6.   

    你的div本身属性就是显示，你就只有隐藏了，除非你把div先隐藏掉
      

  7.   

    visibility:hidden -------->display:none
      

  8.   

    先设置这个div display:none 再显示这个div
      

  9.   

    所有的div都是显示的...我没看出你那个事隐藏的....
      

  10.   


    $().ready(function(){
    //你应该循环遍历你的每一个H3元素来添加事件吧，JQuery好像还没智能到这种程度。
                    $.each($("h3"), function(i,n){
    $(n).bind("click",function(){
    //元素切换显示/隐藏状态建议使用toggle
    $(this).next("div").toggle(500);
    })
                    });
                })
      

  11.   

    $(function(){
                               $("#show h3").bind("click",function(){
                                                       $(this).next("div.content").style.display="block";
                                                       });
                               });
    </script>
    这样看看行不行
      

  12.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <link charset="text/css" href="css/index.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script language="javascript" type="text/javascript" >
    $(function(){
                               $("#show h3").bind("click",function(){
                                                       $(this).next("div.content").toggle();
                                                       });
                               });
    </script>
    </head><body oncontextmenu=self.event.returnValue=false onselectstart="return false"><div id="divbox">
    <div id="inner">
      <div id="show">
      <h3>first</h3>
      <div class="content">此处显示新 Div 标签的内容</div>
    </div>
      <div id="show">
      <h3>first</h3>
      <div class="content">此处显示新 Div 标签的内容</div>
    </div>
      <div id="show">
      <h3>first</h3>
      <div class="content">此处显示新 Div 标签的内容</div>
    </div>
      <div id="show">
      <h3>first</h3>
      <div class="content">此处显示新 Div 标签的内容</div>
    </div>
      <div id="show">
    <h3>first</h3>
      <div class="content">此处显示新 Div 标签的内容</div>
    </div>
      <div id="show">
      <h3>first</h3>
      <div class="content">此处显示新 Div 标签的内容</div>
    </div></div>  
    </div>
    </body>
    </html>
    用toggle!
      

  13.   


    <script type="text/javascript">
            $(function() {
                $("[showid='show'] h3").bind("click", function() {
                    $(this).next("div.content").toggle();
                });
            }); 
        </script>
        <div id="divbox">
            <div id="inner">
                <div showid="show">
                    <h3>
                        first</h3>
                    <div class="content">
                        此处显示新 Div 标签的内容</div>
                </div>
                <div showid="show">
                    <h3>
                        first</h3>
                    <div class="content">
                        此处显示新 Div 标签的内容</div>
                </div>
                <div showid="show">
                    <h3>
                        first</h3>
                    <div class="content">
                        此处显示新 Div 标签的内容</div>
                </div>
                <div showid="show">
                    <h3>
                        first</h3>
                    <div class="content">
                        此处显示新 Div 标签的内容</div>
                </div>
                <div showid="show">
                    <h3>
                        first</h3>
                    <div class="content">
                        此处显示新 Div 标签的内容</div>
                </div>
                <div showid="show">
                    <h3>
                        first</h3>
                    <div class="content">
                        此处显示新 Div 标签的内容</div>
                </div>
      

  14.   

    [code=JScript]iuuguyguygy[/code]