|
|
| 网页效果：jquery实现手风琴效果 |
|
|
|
|
网页效果：jquery手风琴效果一、效果思路1、纵向或者横向排列元素2、开始显示第一个或是最后一个元素，其余元素折叠3、鼠标事件（如：click/hover），移动到那个元素那个元素展开4、鼠标移动的元素展开的同时，其余兄弟元素展开的元素折叠
事件源：鼠标移动到的当前折叠元素（this）事件：鼠标事件（如：click/hover/mouseover......）执行函数：当前元素展开，兄弟地元素折叠代码：$("ulli:gt(0)")：选取ul下li标签元素index大于0的所有元素，即除了第一个li标签元素的所有元素。children("div")：遍历查找子元素为div的
Hover（）：鼠标事件，鼠标移动上去Click（）：鼠标事件，点击事件Mouseup（）：鼠标释放Mouseover（）：鼠标事件，当鼠标位于元素上方，包含元素子元素Mouseenter（）：鼠标事件，当鼠标位于元素上方，不包含元素子元素hide()：隐藏show("1000")：显示，1000为时间，数值越大，显示越慢
siblings()：遍历同级元素
Html:Css:
Jquery:方式一：hover实现方式二：mouseover实现方式三：mouseover实现方式四：click实现方式四：mouseup实现总结：虽然事件不一样，但是其实效果是一样的，主要是要将逻辑理清，将其分为事件源、事件和执行函数，事件源上发了事件从而触发了执行函数。通过jquery选择器找到事件源
通过jquery确定事件源触发什么事件，找到事件函数最后在事件函数了编写将要执行的函数功能
效果图：开始：
点击或鼠标移动菜单二：
动画效果可以任意选择：隐藏/显示，淡入/淡出，滑动个人认为滑动配合点击事件更舒服一些！
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
