jQuery自制手风琴效果增强版(附实现原理)

最新推荐文章于 2024-02-13 10:34:45 发布

alokka

最新推荐文章于 2024-02-13 10:34:45 发布

阅读量4.9k

点赞数 2

分类专栏： JQUERY 文章标签： jquery 导航手风琴

本文链接：https://blog.csdn.net/alokka/article/details/73305483

版权

JQUERY 专栏收录该内容

14 篇文章 3 订阅

订阅专栏

手风琴菜单栏效果通常用在页面左侧，当导航内容比较多时使用手风琴的展示方式更有利于信息的传递和排版，我在http://blog.csdn.net/lzgs_4/article/details/48101877博主的基础上又增加了点击出现点击收缩的功能(具体效果可以看gif)

这里写图片描述

具体代码如下啦~~
因为是引用的百度静态资源公共库http://cdn.code.baidu.com/，所以直接把代码复制粘贴就可以用啦~~比心♥

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
<title>自制手风琴</title>  
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>  
<style type="text/css">  
    body,ul,li{margin: 0 auto;padding: 0;}  
    ul,li{list-style-type: none;cursor: pointer;color: white;line-height: 30px;text-align: center;}
    ul{width: 200px;}  
    ul span{background-color: skyblue;display: block;font-weight: bold;border-bottom: 1px solid #ccc;}  
    ul:last-child span{border-bottom: none;} /*清除最后一个span的底部border*/
    li{background-color: lightgray;display: none;}  
    li:hover{background-color: lightblue;}    
</style>  
</head>  
<body>  
    <ul>  
        <span>标题11111</span>  
        <li>11111</li>  
        <li>11111</li>  
        <li>11111</li>  
        <li>11111</li>  
        <li>11111</li>
    </ul>  
    <ul>  
        <span>标题22222</span>  
        <li>22222</li>  
        <li>22222</li>  
        <li>22222</li>
        <li>22222</li>
        <li>22222</li>  
    </ul>  
    <ul>  
        <span>标题33333</span>  
        <li>33333</li>  
        <li>33333</li>  
        <li>33333</li>  
        <li>33333</li>  
        <li>33333</li>  
    </ul>  
    <ul>  
        <span>标题44444</span>  
        <li>44444</li>  
        <li>44444</li>  
        <li>44444</li>
        <li>44444</li>
        <li>44444</li>
    </ul>  
    <ul>  
        <span>标题55555</span>  
        <li>55555</li>  
        <li>55555</li>  
        <li>55555</li> 
        <li>55555</li>  
        <li>55555</li> 
    </ul>  
    <script type="text/javascript">  
  
                $('span').click(function(){  
                if($(this).siblings("li").hasClass('on')){  
                    $(this).siblings("li").slideUp(500).removeClass("on");  
                }else{  
                    // 首先要清除其他li标签的on类名
                                  $(this).parent().siblings().children("li").removeClass("on");
                    // on类名是随便起的，也可是active什么的都行
                                   $(this).siblings("li").slideDown(500).addClass("on").parent().siblings().children("li").slideUp(500); 
                }  
            }); 
    </script>  
</body>  
</html>

快去浏览器看看效果吧！

Author:lokka

Sign:一步登天做不到，但一步一个脚印能做到；一鸣惊人不好做，但一股劲做好一件事，可以做；一下成为天才不可能，但每天进步一点点有可能。

alokka

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
jQuery自制手风琴效果增强版(附实现原理)

手风琴菜单栏效果通常用在页面左侧，当导航内容比较多时使用手风琴的展示方式更有利于信息的传递和排版，我在http://blog.csdn.net/lzgs_4/article/details/48101877博主的基础上又增加了点击出现点击收缩的功能(具体效果可以看gif)具体代码如下啦~~ 因为是引用的百度静态资源公共库http://cdn.code.baidu.com/，所以直接把代码复制粘贴就
复制链接

扫一扫