日期:2014-05-16  浏览次数:20338 次

jquery dt鼠标经过对应dd显示
jquery操作:

dt鼠标经过加上 class="selected",同时它对应的dd移去 class="hidden"。




<dl class="xnavlist">
<dt class="selected"><a href="#">分类一</a></dt>
<dd>
<ul class="item-01">
<li></li>
<li></li>
<li></li>
</ul>
</dd>
<dt><a href="#" target="_blank">分类二</a></dt>
<dd class="hidden">
<ul class="item-02">
<li></li>
<li></li>
<li></li>
</ul>
</dd>
<dt><a href="#" target="_blank">分类三</a></dt>
<dd class="hidden">
<ul class="item-03">
<li></li>
<li></li>
<li></li>
</ul>
</dd>
<dt><a href="#" target="_blank">English</a></dt>
</dl>


------解决方案--------------------
    $(function () {
        $(".xnavlist dt").mouseover(function () {
            $(this).attr("class", "selected").siblings().attr("class", "hidden")
        })
    });

------解决方案--------------------
    $(function () {
        $(".xnavlist dd:not(':first')").hide();
        $(".xnavlist dt:not(':last')").mouseover(function () {
            $(".xnavlist dd").hide().attr("class","hidden");
            $(this).next().removeAttr("class").show();
            $(this).addClass("selected").siblings().removeAttr("class");
        });
    });