如何根据css名给dt加入事件处理

Question

<style>
dt{cursor:default}
.on{background:#ccc}
</style>
<script>
onload = function(){
var par = document.getElementById('Menu'), dts = par.document.getElementsByTagName('dt'), dds = par.document.getElementsByTagName('dd'), cur = 0//默第一个dt;
for(var i=0; i<dts.length; i++){
dts[i].i = i;
dts[i].onclick = function(){
if(cur!=null){
dts[cur].className = '';
dds[cur].style.display = 'none';
}
if(cur===this.i) return cur = null;
this.className = 'on';
dds[this.i].style.display = '';
cur = this.i;
}
}
}
</script>
<div id="Menu" >
     <div class="boxBody">
    <dl>
      <dt class="on">系统模块1</dt>
        <dd style="display:;">
         <ul>
              <li href="/widget/category/1" class="hover">全部<span>(30)</span></li>
             </ul>
       </dd>
          <dt class="">订单模块2</dt>
        <dd style="display: none;">
           <ul>
               <li href="/widget/category/1" class="hover">全部<span>(30)</span></li>
               </ul>
        </dd>
        </dl>
      </div>                
</div>

Answer 1

dts = par.document.getElementsByTagName('dt'), dds = par.document.getElementsByTagName('dd'), 去掉“document.”，可实现兼容