jQuery鼠标点击显示和隐藏

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

HTML代码：

<dl>
    <dt>标题</dt>
    <dd>内容</dd>
    
    <dt>标题</dt>
    <dd>内容</dd>
    
    <dt>标题</dt>
    <dd>内容</dd>
    
    <dt>标题</dt>
    <dd>内容</dd>
</dl>

CSS代码：

*{padding:0;margin:0}
dl{width:300px;color:#fff;line-height:28px;text-align:center}
dl dt{height:28px; background:#066}
dl dd{height:200px; background:#666;overflow:hidden}

jQuery代码：

<script type="text/javascript">
        $(document).ready(function(){
           $("dt").click( function(){
              $(this).next("dd").slideToggle()
           })
        })
    </script>

 

 

转载于:https://www.cnblogs.com/pqw1991/archive/2012/08/30/2663445.html