请教高手此处打开隐藏效果如何实现的？

下面有个新手指南。如普通的直接通过ID实现更换样式可是实现，但如果标题栏目多了。不是每个需要制定一个id。这样太麻烦，我刚看了下他们的代码，没有指定id 而且只看到他们呢只设置了样式，就能实现点击英藏，不知道如何实现的，请教高人告知其原理。方法。谢谢.
http://www.lashou.com/faq.php?act=help

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

$('dt').click(function(){
if($(this).hasClass('expand')){
$(this).next().hide();
$(this).attr('class','original');;
return;
}
$('dd').hide();
$('dt').attr('class','original');
$(this).attr('class','expand');
$(this).next().show();
});点击dt的时候通过它去找它的下个元素 .
jquery是 next() 原js是 nextSibling ;
定义一个样式的display为none 在定义一个为空获取到事件的时候轮换两个样式就可以了
单个可以这样，如果多个展开和隐藏呢？不能一直定义不同ID互换吧？   有JS方面的代码？ JQ不太喜欢/
确实是不同用相同的ID 但总可以用相同的name吧，点击title现实相应的content
<!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=utf-8" />
    <title>zell419</title>
</head>
<body>
    <dl>
<dt class="expand">初到拉手，我该怎样参加团购呢？</dt>
<dd style="display: block;">先看看我们特别为您准备的入门教程吧。<a href="faq.php?act=tutor">立即查看</a></dd>

<dt class="original">我收到了手机短信，应该怎么使用？</dt>
<dd style="display: none;">凭手机短信中的拉手券密码就可直接到店消费！</dd>

<dt class="original">拉手券可以给朋友吗？</dt> <dd style="display: none;">
<p><strong>方法一、</strong>在我的拉手券页面中,点“赠送”按钮,输入好友在拉手网的账号，就直接赠送给朋友了。<a href="http://www.lashou.com/mycode.php?s=1">去看看吧</a></p><br>
<p><strong>方法二、</strong>直接转发短信或者将打印的拉手券交给朋友就可以啦！拉手券不是实名制的，所以也请您保管好自己的拉手账户哦！</p>
</dd>

<dt class="original">我在哪里能看到购买记录？</dt>
<dd style="display: none;">您可以到“我的拉手—我的订单”查看。<a href="mygo.php">去查看吧</a></dd>
<dt class="original">一定要在今天付款吗？</dt>
<dd style="display: none;">页面上有本次团购的结束时间，需要在结束时间之前付款哦！如果这次团购达到了人数上限会提前结束的，所以请尽早付款哦！ </dd>

<dt class="original">如果团购失败了，我的钱怎么办？</dt>
<dd style="display: none;">如果团购没有达到最低人数，我们会有客服专员和您联系确认退款的，请您放心！</dd>  </dl>

<script type="text/javascript">
    window.onload = function(){
        var dts = document.getElementsByTagName("dt");
        for(var i = 0 ; i < dts.length ; i++){
            dts[i].onclick = function(){
                 clear(dts);
                 this.nextSibling.style.display = "block";
            }
        }
    }
    var clear = function(dts){
        for(var i = 0 ; i < dts.length ; i++){
               dts[i].nextSibling.style.display = "none";
        }
    }
</script>
</body>
</html>没有什么id
这个跟ID没关系啊，用class啊
js里面首先把所有的设置为隐藏，this当前显示，else关闭
谢谢，等会给你加分，现在我想看看。ziyouren521125用户的写法。
<!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=utf-8" />
<title>无标题文档</title>
<style>
.expand{ background-color:#960}
.original{ background-color:#09F}
.display_none{ display:none}
.display_null{ display:block}dd{ display:none}
</style>
</head><body>
<dl>
             <dt class="expand">初到拉手，我该怎样参加团购呢？</dt>
            <dd>先看看我们特别为您准备的入门教程吧。<a href="faq.php?act=tutor">立即查看</a></dd>

            <dt class="original">我收到了手机短信，应该怎么使用？</dt>
            <dd>凭手机短信中的拉手券密码就可直接到店消费！</dd>

            <dt class="original">拉手券可以给朋友吗？</dt>            <dd>
            <p><strong>方法一、</strong>在我的拉手券页面中,点“赠送”按钮,输入好友在拉手网的账号，就直接赠送给朋友了。<a href="http://www.lashou.com/mycode.php?s=1">去看看吧</a></p><br>
            <p><strong>方法二、</strong>直接转发短信或者将打印的拉手券交给朋友就可以啦！拉手券不是实名制的，所以也请您保管好自己的拉手账户哦！</p>
            </dd>

            <dt class="original">我在哪里能看到购买记录？</dt>
            <dd>您可以到“我的拉手—我的订单”查看。<a href="mygo.php">去查看吧</a></dd>
            <dt class="original">一定要在今天付款吗？</dt>
            <dd>页面上有本次团购的结束时间，需要在结束时间之前付款哦！如果这次团购达到了人数上限会提前结束的，所以请尽早付款哦！ </dd>

            <dt class="original">如果团购失败了，我的钱怎么办？</dt>
            <dd>如果团购没有达到最低人数，我们会有客服专员和您联系确认退款的，请您放心！</dd>  </dl>
</body>
</html>
<script src="jquery-1.4.2.min.js" language="javascript" type="text/javascript"></script>
<script>
$("dt").click(function(){
   $("dt").addClass("original");
   $(this).removeClass("original").addClass("expand");
   $("dd").removeClass("display_null").addClass("display_none");
   $(this).next().removeClass("display_none").addClass("display_null");
   })
</script>
不好意思，刚才看到，写了一下，你看看