alokka的博客

本人前端小菜鸟 希望能用自己简单明了的文字来说明一些我遇到的 或者说基础的知识点 希望大家能有所收获!...

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

手风琴菜单栏效果通常用在页面左侧,当导航内容比较多时使用手风琴的展示方式更有利于信息的传递和排版,我在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:一步登天做不到,但一步一个脚印能做到;一鸣惊人不好做,但一股劲做好一件事,可以做;一下成为天才不可能,但每天进步一点点有可能。

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/alokka/article/details/73305483
文章标签: jquery 导航 手风琴
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭