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

帮我改哈代码,刚学jquery,比较菜
页面就是分了两大块,点大类的时候子内容就显示,鼠标划入li的时候颜色发生了改变

现要2处要改下,1:比如当点电子秤的时候 如果下面高清电视 子内容如果是展开的,就收缩回来,反之亦然


2:当鼠标划入li的时候颜色发生了改变,划入到另外一个模块li的时候 先前li的时候颜色就remove

也许语言说的不是很清楚,大家帮我的代码COPY到DW里就明白了,,谢谢
<style type="text/css">
 ul li ul li{
list-style:none;
width:150px;
background:#fff000;
height:25px;
line-height:25px;




}
.tree{
width:600px;
background:#CCCCCC;
}

.change{
background:#3399CC;


}







</style>


</head>
<body>
   
   
   

  <div class="tree">
  <ul>
<li>
<span>电子秤</span>
<ul>
<li>电子健康秤</li>
<li>人体脂肪检测仪</li>
<li>红外人体脂肪检测仪</li>
<li>人体脂肪水份检测仪</li>
<li>手提秤</li>
<li>口袋秤</li>
<li>婴儿秤 </li>
<li>配餐秤 </li>

</ul>


</li>


</ul>

<ul>
<li>
<span >高清播放器</span>
<ul>
<li>A1系列</a></li>
<li>B1系列</li>
<li>C1系列</li>
</ul>


</li>
</ul>






</div>
   
   
  </body>
<script type="text/javascript">
$(function(){
$(".tree ul li ul").hide();
$(".tree ul li span").click(function(){
$(this).next().show()


})
})
</script>
<script type="text/javascript">
$(".tree ul li ul li").mouseover(function(){

$(this).css("background","#ffffff")
$(this).siblings().css("background","#ffff00")
}


)
</script>

------解决方案--------------------
JScript code
$(function() {
    $(".tree ul li ul").hide();
    $(".tree ul li span").click(function() {
        $(".tree ul li ul").hide();
        $(this).next().show()
    });
});
$(".tree ul li ul li").mouseover(function() {
    $(".tree ul li ul li").css("background-color", "#FF0");
    $(this).css("background-color", "#FFF");
});