学习用jQuery制作类似于QQ好友的菜单效果 首先需要创建一个菜单列表。
我们需要做出的效果就是点击各个分类名称,然后里面的人物列表会出现,即点击title之后里面的list列表会出现。 首先还是要引入jQuery库。 ``` ``` 然后, ``` ```通过jQuery,我们之前可以使用hide()和show()来实现元素的隐藏和显示,现在可以使用 toggle() 方法来实现切换 hide() 和 show() 方法的操作。next() 方法就是被选元素的下一个同胞元素,在这个例子中就表示是对title的下一个元素即list元素进行操作。 toggle()方法原理是
function toggle() {
if (this.css('display') === 'none'){
this.show()
} else{
this.hide()}
}
以上是实现的菜单下拉效果,接着我们可以实现菜单手风琴效果,即一次只显示一个的下拉效果。
<script>
$('.menu>li .title').click(function () {
let other_li = $(this).parent().siblings()
other_li.find('.list').hide()
$(this).next().toggle()
})
</script>