jquery简易的三级导航

<!DOCTYPE html>

<html>

<head>

li {

list-style: none;

background-color: #1b1a1a;

color: #efefef;

line-height: 40px;

cursor: pointer;

}

li div:hover {

background-color: #000;

color: #fff;

box-shadow: 0 0 10px rgba(0,0,0,0.8);

text-shadow: 0 0 2px rgba(255,255,255,0.8);

}

ul {

padding-left: 0;

width: 300px;

overflow: hidden;

}

.first i {

margin-right: 4px;

font-size: 14px;

}

.second div {

padding-left: 28px;

}

.third div {

padding-left: 46px;

}

.second, .third {

display: none;

}

.qf {

float: right;

padding-right: 10px;

}

</style>

</head>

<body>

<li>

<li>

</li>

<li>

</li>

<li>

</ul>

</li>

</ul>

</li>

<li>

<li>

</ul>

</li>

</ul>

</li>

</ul>

//给所点击的li添加点击事件，find()找到对所有对应的子元素，添加slideToggle()的方法，组织事件冒泡

$('.first>li').on('click',function(){

$(this).find('.second').slideToggle();

event.stopPropagation();

})

$('.second>li').on('click',function(){

$(this).find('.third').slideToggle();

event.stopPropagation();

})

$("li").on('click', function() {

event.stopPropagation();

})

//替换类名，toggleClass()的方法iconfont的类名切换，以达到加号换减号的方法

$("li:has(ul)").on('click',function(){

var i = $(this).children('div').children('i');

i.toggleClass('qf-shop-plus').toggleClass('qf-shop-jianhaocu');

})

</script>

</body>

</html>

巴特西

jquery简易的三级导航

最新文章

热门文章