jQuery学习笔记 2

131 阅读1分钟

学习用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>