手风琴jQuery案例

此案例为手风琴jQuery案例,即是列表缩放使用jQuery方法使用点击事件完成此案例,以下将开始此次学习;

建立案例所需要的元素

<li>

<li><a href="#">iPhone X 256G</a></li>

<li><a href="#">HUAWEI Mate10</a></li>

</ul>

</li>

<li>

<ul>

<li><a href="#">MacBook Pro</a></li>

<li><a href="#">ThinkPad</a></li>

<li><a href="#">外星人(Alienware)</a></li>

<li><a href="#">惠普(HP)薄锐ENVY</a></li>

</ul>

</li>

<li>

<ul>

<li><a href="#">海信(hisense)</a></li>

<li><a href="#">长虹(CHANGHONG)</a></li>

<li><a href="#">TCL彩电L65E5800A</a></li>

</ul>

</li>

<li>

<ul>

<li><a href="#">adidas</a></li>

</ul>

</li>

<li>

<ul>

</ul>

</li>

</ul>

设置元素在此案例中显示的属性

body {

font-family: 'Microsoft Yahei';

}

body, ul {

margin: 0px;

padding: 0px;

}

ul {

list-style: none;

}

.menu {

width: 200px;

margin: 20px auto 0;

}

.menu .level1, .menu li ul a {

display: block;

width: 200px;

height: 30px;

line-height: 30px;

text-decoration: none;

background-color: #3366cc;

color: #fff;

font-size: 16px;

text-indent: 10px;

}

.menu .level1 {

border-bottom: 1px solid #afc6f6;

}

.menu li ul a {

font-size: 14px;

text-indent: 20px;

background-color: #7aa1ef;

}

.menu li ul li {

border-bottom: 1px solid #afc6f6;

}

.menu li ul {

display: none;

}

.menu li ul.current {

display: block;

}

.menu li ul li a:hover {

background-color: #f6b544;

}

</style>

带入jQuery插件

首先获取a标签 jquery元素再获取 a标签下面的ul 的jquery 元素然后点击 a标签以后改变ul标签的显示最后改变其他的ul标签的隐藏

$(function () {

1.获取a标签 jquery元素

var $a = $('.level1')

2.获取 a标签下面的ul 的jquery 元素

$a.click(function () {

3.点击 a标签以后改变ul标签的显示

4.改变其他的ul标签的隐藏

ul-父级>li-兄弟>li-子标签>ul

$(this).next().slideToggle().parent().siblings().children('ul').slideUp(300)

})

总结:此案例采用的开发工具是Visual Studio 2019，主要使用到的方法是jQuery方法的点击事件，注意:这种动画会有粘黏的效果：上一次没有播放完成导致下一次的上下一起播放$(this).next().slideToggle().parent().siblings().children('ul').slideUp();stop()用来去除上一次播放;这是我所学到的案例，所以我要分享给你们，希望可以帮助到你们。以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！

手风琴jQuery案例相关推荐

jQuery效果-自定义动画效果animate /王者荣耀手风琴效果案例
jQuery效果自定义动画效果animate animate([params,[speed],[easing],[fn]) (1)params:想要更改的样式属性,以对象形式传递,必须写,属性名可以 ...
【jQuery案例】自动轮播图
[jQuery案例] 自动轮播图使用jQuery实现了图片自动轮播有左右按钮和底部小圆点选择功能源代码如下: <!DOCTYPE html> <html lang=" ...
【jQuery案例】手风琴
jQuery案例（底部导航图片切换）
作为一个代码新手,最近我又学习了一些jQuery的相关知识,所以今天就做了一个小案例.如下: 通过点击图标切换并点亮图标,现在我们就开始做吧 ,首先说一下思路: 我是通过事件委托的方式做的,大致思路就 ...
jQuery初识 - jQuery案例练习
jQuery事件委托什么是事件委托请别人帮忙做事情,然后将做完的结果反馈给我们在jQuery中,如果通过核心函数找到的元素不止一个,那么在添加事件的时候,jQuery会遍历所有找到的元素,给 ...
[jQuery基础] jQuery案例 -- qq音乐以及初步解决Ajax 跨域问题
qq音乐案例案例效果展示案例效果结构划分整体布局歌曲条目部分顶部栏底部栏歌词显示部分案例实现功能 a. QQ音乐播放器静态页面布局 * 页面整体布局规划和实现 * 页面顶部布局和静态效 ...
[jQuery基础] jQuery案例 -- 新浪微博
新浪微博案例思路主要说说JavaScript的思路随时要监听内容的输入有内容输入添加,按钮可以点击没有内容输入禁止点击按钮监听点击发布按钮拿到用户输入的内容根据内容创建节点插入微 ...
b站pink老师JavaScript的jQuery 案例代码——新浪下拉菜单
目录 jQuery中:[使用jquery,记得要引入jquery文件] 用到的重点代码/原理: 1.原案例版本(不简洁,效果较为僵硬) 2.简洁+优化1.0版部分:(中等简洁,效果较柔和) 3.简洁+ ...
jquery案例10——下拉列表显示、二级菜单
一.案例效果二.案例完成代码(方法多种) <!DOCTYPE html> <html lang="en"><head><meta cha ...

手风琴jQuery案例

手风琴jQuery案例相关推荐

最新文章

热门文章