《第40天 : JQuery - 手风琴列表》

zhiwei 发布于2019-08-29 17:10 / 1975人阅读

摘要：源码下载地址链接提取码如果有赞就很幸福了今天要和你们分享的是我看了库的手风琴列表样式。该方法检查被选元素的可见状态。

源码下载地址：
链接：https://pan.baidu.com/s/1x9c1...
提取码：2bzr
如果有赞就很幸福了.

今天要和你们分享的是我看了JQuery库的手风琴列表样式。
它的核心在于它的JQuery代码思想，对于html或者是css都是次要的，在前端中，这种列表十分常用，一起学习起来吧。
开始讲解前，为大家做一些知识储备，在接下来的实操中会用到。

1.on()方法：在被选元素及子元素上添加一个或多个事件处理程序，它有三个参数。
event：事件名称，例如click.
childSelector:指定的子元素上的事件处理程序,不是选择器本身.
function:事件发生时运行的函数.
在实践中的会这样体现这个方法：

$(".accordion > li").on("click", ".link", function(){ // }

2.slideToggle()方法
在被选元素上进行 slideUp() 和 slideDown() 之间的切换。
该方法检查被选元素的可见状态。
如果一个元素是隐藏的，则运行 slideDown()
如果一个元素是可见的，则运行 slideUp() - 这会造成一种切换的效果。

3.parent()方法
表示当前选择器选中元素的父级

4.childern()方法
表示当前选择器选中元素的子级

5.toggleClass()方法
添加或者移除一个类名

6.find()方法
返回被选元素的后代元素，可以指定class为哪个名称。

接下来分为三个模块跟大家来讲解：

Html模块：




    
    菜单
    //导入css文件
     //图标样式
    
    


    
        
            //这一层为列表标题栏目，点击可以展开
                语音技术voice
                
                    语音识别
                    语音合成
                    语音唤醒
                    智能呼叫中心
                
            
            
                图像技术photo
                
                    文字识别
                    图像识别
                    图像审核
                    图像搜索
                
            
            
                人脸与人体识别face
                
                    人脸识别
                    人体分析
                
            
            
                视频技术video
                
                    视频内容分析
                    视频封面选取
                    视频比对检索
                    视频内容审核

CSS板块

* { 
    margin:0;
    padding:0;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
} /*初始化*/
body {
    background:#2d2c41;
    font-family:open sans, Arial, Helvetica, Sans-serif, Verdana, Tahoma;
} /*使用什么字体*/
ul {
    list-style-type:none; /*去掉前面小圆点*/
}
.accordion {
    max-width: 360px;
    width: 100%;
    background-color: #ffffff;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius: 4px;
    margin: 30px auto 20px;
}
.accordion .link{
    cursor: pointer;
    display: block;
    padding: 15px 15px 15px 42px;
    color: #4d4d4d;
    font-size: 14px;
    font-weight:700;
    border-bottom:1px solid #ccc;
    position:relative;
}
.accordion li i {
    position:absolute;
    top:16px;
    left:12px;
    font-size:18px;
    color:#595959;
}
.accordion li i.fa-chevron-down {
    right:12px;
    left:auto;
    font-size:16px
    -webkit-transition:all .4s ease;
    -o-transition:all .4s ease;
    transition:all .4s ease
}
.submenu {
    display:none;
    background:#444359;
    font-size:14px
}
.display{
    display: block;
}
.submenu li {
    border-bottom:1px solid #4b4a5e
}
.submenu a {
    display:block;
    text-decoration:none;
    color:#d9d9d9;
    padding:12px;
    padding-left:42px;
    -webkit-transition:all .25s ease;
    -o-transition:all .25s ease;
    transition:all .25s ease
}
.submenu a:hover {
    background:#b63b4d;
    color:#fff;
}
.fa-chevron-down-hover{ /* JQ对它的操作：点击后添加这个class，再次点击后去除这个class*/
    -webkit-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    transform:rotate(180deg)
}

JQ部分（重点）

$(function(){
    $(".accordion > li").on("click", ".link", function() {
        $(this).next(".submenu").slideToggle(500);
        //这里的this代表的就是html模块中:class为link的div;link的next()就为submenu，功能为：下拉列表的出现与消失
        $(this).parent().siblings().children(".submenu").slideUp(500);
        //如果一个列表展开，其他的兄弟列表就要收起
        $(this).find(".fa-chevron-down").animate().toggleClass("fa-chevron-down-hover");
        //关于图标旋转问题，点击一下旋转180度，再次点击回来原来的位置
        $(this).parent().siblings().children(".link").find(".fa-chevron-down").animate().removeClass("fa-chevron-down-hover");
        //除了被点击的li，所有的li都要去掉fa-chevron-down-hover 这个class
        console.log("方法被执行");
    });
});

以上就是我今天的分享
有时候要学会与未来的自已对话，不要被未来的自已当成陌生人，问未来的自已你想要现在的我：为你做一些什么样的努力.
希望我们都一直在进步的路上.

专线服务私有云 jquery手风琴 jQuery手风琴插件 jquery手风琴代码 jquery列表上移

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114149.html

《第40天 : JQuery - 手风琴列表》

摘要：源码下载地址链接提取码如果有赞就很幸福了今天要和你们分享的是我看了库的手风琴列表样式。该方法检查被选元素的可见状态。 showImg(https://segmentfault.com/img/bVbjavP?w=387&h=408); 源码下载地址：链接：https://pan.baidu.com/s/1x9c1... 提取码：2bzr 如果有赞就很幸福了. 今天要和你们分享的是我看了...

songze 2019-08-02 11:55 评论0 收藏0
CSS3热身实战--过渡与动画（实现炫酷下拉，手风琴，无缝滚动）

摘要：规定动画的时长。注意子菜单要用隐藏，在显示的时候再设置。如果不加，实际上子菜单，以及子菜单下面的一直在页面上，如果鼠标移上去子菜单，以及子菜单下面的。 1.前言在自己的专栏上写了十几篇文章了，都是与js有关的。暂时还没有写过关于css3的文章。css3，给我的感觉就是，不难，但是很难玩转自如。今天，就用css3来实现三个特效，希望这三个特殊能让大家受到启发，利用css3做出更好，更炫...

zqhxuyuan 2019-08-29 13:03 评论0 收藏0
jQuery手风琴制作

摘要：，通过高度变化向下增大来动态地显示所有匹配的元素。，将匹配的元素列表变为前一次的状态。，取得一个包含着所有匹配元素的唯一父元素的元素集合。，隐藏显示的元素。完成了这几步之后，我们的手风琴菜单就出来了，来看一下我们的效果吧 jQuery手风琴制作说起手风琴，想必大家应该都知道吧，简单的来说就是可以来回收缩的这么一个东西，接下来，我就给大家演示一下用jQuery制作一个手风琴菜单！ ...

muddyway 2019-08-21 11:48 评论0 收藏0
jQuery入门笔记之（七）插件

摘要：目前插件已超过几千种，由来自世界各地的开发者共同编写验证和完善。而对于开发者而言，直接使用这些插件将快速稳定架构系统，节约项目成本。也就是说，插件也是代码，通过文件引入的方式植入即可。现在我们就完成了一个下拉菜单的插件。插件(Plugin)也成为 jQuery 扩展(Extension)，是一种遵循一定规范的应用程序接口编写出来的程序。目前 jQuery 插件已超过几千种，由来自世界...

defcon 2019-08-19 17:44 评论0 收藏0
jQuery，别具一格的手风琴菜单

摘要：，别具一格的手风琴菜单的全部代码的全部代码温泉酒店情侣酒店设计师酒店青年旅舍特色客栈海岛酒店海外温泉基于横向手风琴效果是一款基于实现的左右滑动手风琴图片轮播切换特效。 jQuery，别具一格的手风琴菜单 css的全部代码！！！ *{ margin: 0; padding: 0; } .da{ width: 1200px; height: 260px; ...

cncoder 2019-08-21 11:48 评论0 收藏0