使用jQuery来控制产品一级二级分类的弹出与隐藏

在很多电商网站的左上角都有一个产品目录的按钮。鼠标移动上去，显示一个下拉列表，这个下拉为一级分类。鼠标移动到一级分类上，会弹出二级分类的层；移动到不同的一级分类上，右边的二级分类也跟随变动。

当鼠标从整个层（包括一级分类和二级分类）上移走时，弹出的一级分类和二级分类消失。

<!--这里是控制显示的按钮-->

<div class="navJY">废弃物交易分类</div>

<!--下面是弹出的层-->

<div id="navJYBlock" class="navJYBlock cc">

<!--一级分类-->

<div class="navJYB_left fl">

<ul>

<volist name="itemlists" id="vo">

<li <if condition="$i eq 1">class="navJY_on"</if>>{$vo.fclassName}</li>

</volist>

</ul>

</div>

<!--二级分类-->

<div class="navJYB_right fl">

<volist name="itemlists" id="vo">

<if condition="$i eq 1">

<div class="navJYB_rShow navJYB_rSBlock">

<else/>

<div class="navJYB_rShow">

</if>

<div class="navJYB_r_Tit"><a href="{:U($itemurl,array('cateid'=>$vo['id']))}">{$vo.fclassName}</a></div>

<div class="navJYB_r_box">

<volist name="vo.subcate" id="vo1">

<a href="{:U($itemurl,array('cateid'=>$vo['id'],'cateid2'=>$vo1['id']))}">{$vo1.fclassName}</a>

</volist>

</div>

</div>

</volist>

<a class="navJYB_r_close" onclick="document.getElementById('navJYBlock').style.display='none'"></a>

</div>

</div>

相关的js代码：

// 控制一级分类的显示

//.navJY为按钮，navJYBlock为整个包含一级分类和二级分类的层

$(".navJY").hover(function(){

    $(".navJYBlock").css('display','block');

});

//点一级分类，显示二级分类

$(".navJYB_left li").hover(function(){

    var liindex=$(".navJYB_left li").index(this);

    $(this).addClass("navJY_on").siblings().removeClass("navJY_on");

    $(".navJYB_right .navJYB_rShow").eq(liindex).addClass("navJYB_rSBlock").siblings().removeClass("navJYB_rSBlock");

});

//鼠标从大的层上移走时，整个一级分类和二级分类均消失

$("#navJYBlock").mouseleave(function(){

    $("#navJYBlock").css('display','none');