给typecho的分类列表增加class
默认的列表虽然都带了样式,但是二级分类的ul并没有带上独有的class,以及存在二级分类的li也没有特别class,所以,既然带入了jquery,那就用上吧,寻找二级分类的父元素增加样式,只是为了圆角
<script>
$(document).ready(function(){
//分类导航增加下来菜单样式
$(".g7-catnav>ul>li").hover(function(){
$(this).find('>ul').delay(150).slideDown(300).fadeIn(200);
$(this).find('>ul').parent().addClass('has-child');
}, function(){
$(this).find('>ul').fadeOut(200);
$(this).find('>ul').parent().removeClass('has-child');
});
});
</script>
.g7-catnav .has-child {
border-radius:.25rem .25rem 0 0;
}
上面这个方式就是鼠标滑过就执行,多次滑过就不好看了,所以修改为以下这个样子:
<script>
//分类导航增加下来菜单样式
$(".g7-catnav li").hover(function() {
if($(this).find("li").length > 0){
$(this).children("ul").stop(true, true).delay(150).slideDown(300);
$(this).addClass('has-child');
}
},function() {
$(this).children("ul").stop(true, true).slideUp(150);
$(this).removeClass('has-child');
});
</script>
最后修订于 2017-11-24 10:39:32
- 上一篇 所以说jquery是个好东西
- 下一篇 jquery的背景视差效果