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


关键词

jQuery 分类 hover mouseleave

摘要

本文介绍使用jquery的hover方法和mouseleave方法来控制产品一级、二级分类的显示和隐藏。

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

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

相关代码如下:

<!--这里是控制显示的按钮-->
<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');
});

 

文章的版权

洪哥写文章很苦逼,如果本文对您略有帮助,点击感兴趣的广告支持洪哥!万分感谢!本文属于“洪哥笔记”原创文章,转载请注明来源地址:使用jQuery来控制产品一级二级分类的弹出与隐藏:http://www.splaybow.com/post/jquery-level2-cate-show-hide.html

关注与收藏

如果您在服务器运维、网络管理、网站或系统开发过程有需要提供收费服务,请加QQ:115085382!十年运维经验,帮您省钱、让您放心!
亲,如果有需要,先存起来,方便以后再看啊!加入收藏夹的话,按Ctrl+D


« 怎么让A标签内容不换行 mouseleave()与mouseout()的区别 »