最新在学习JS写一些实用的小玩意——手风琴

　　CSS样式：

     <style type="text/css">

         * {

             margin: 0px;

             border: 0px;

             padding: 0px;

         }

         .leftli {

             float: left;

             width: 200px;

             background: #3D4444;

         }

         ul li {

             display: block;

             line-height: 25px;

             width: 200px;

             height: 25px;

             list-style-type: none;

             border-collapse: collapse;

             font-size: 15px;

             color: #DBDBDB;

             margin-left: 20px;

         }

         ul li:hover {

             background: #FFFFFF;

             color: #000000;

             cursor: pointer;

             height: 40px;

             line-height: 40px;

             font-size: 22px;

         }

         a {

             display: block;

             line-height: 50px;

             width: 200px;

             height: 50px;

             list-style-type: none;

             font-size: 30px;

             left: 5px;

             color: #F9F9F9;

             font-size: bold;

         }

         a:hover {

             background: #FFFFFF;

             color: #2FA8EC;

             cursor: pointer;

             height: 65px;

             line-height: 65px;

             font-size: 40px;

             text-align: center;

         }

     </style>

　　HTML布局：

     <body>

         <div class="leftli">

             <div>

                 <a>First</a>

                 <ul>

                     <li>First One</li>

                     <li>First Two</li>

                 </ul>

                 <a>Second</a>

                 <ul>

                     <li>Second One</li>

                     <li>Second Two</li>

                 </ul>

                 <a>Third</a>

                 <ul>

                     <li>Third One</li>

                     <li>Third Two</li>

                 </ul>

                 <a>Fourth</a>

                 <ul>

                     <li>Fourth One</li>

                     <li>Fourth Two</li>

                 </ul>

                 <a>Fifth</a>

                 <ul>

                     <li>Fifth One</li>

                     <li>Fifth Two</li>

                 </ul>

                 <a>Sixth</a>

                 <ul>

                     <li>Sixth One</li>

                     <li>Sixth Two</li>

                 </ul>

             </div>

         </div>

     </body>

　　引用的JS

     <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>

　　JS关键代码

 　　<script type="text/javascript">

         $(function() {

             //设置DIV的高度跟随屏幕变化而变化，类似于自适应

             $(".leftli").height(document.body.scrollHeight);

             //隐藏除第一个元素以外的所有元素

             $(".leftli ul:gt(0)").hide();
         })

         //bind()为.leftli a的a生成点击事件

         $(".leftli a").bind("click", function() {

             //.netx("li")获取同级的下一个li元素

             //slideToggle(300)展开/关闭当前被点击的ul元素，300为速度，除了可以是数字还可以"slow"、"normal"、"fast"

             //siblings("ul")遍历所有的ul元素

             //slideUp(300)隐藏已经被展开的其他ul元素，300为速度，除了可以是数字还可以"slow"、"normal"、"fast"

             $(this).next("ul").slideToggle(300).siblings("ul").slideUp(300);

         })

     </script>

　　JS大致思路就是先获取当前被点击的a元素，然后展开a元素下的ul元素，再遍历所有的ul元素，再将已展开的ul元素隐藏，这样就完成了手风琴效果。

　　手风琴效果如果有不完善的地方，希望各位JS/JQ大神多多指教，大家共同学习，送上Demo下载。

　　文章可随意转载，转载请注明出处(http://www.cnblogs.com/yy981420974/p/5891918.html)。

JS+JQ手风琴效果的更多相关文章

  1. 使用JS实现手风琴效果

    想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...

  2. js实现手风琴效果

    之前在慕课网上有练习手风琴效果,但是老师使用jquery简简单单的两三行实现了,今天自己用js练习一下效果 <div id="divbox"> <ul> & ...

  3. JS/JQ动画效果

    1.弹出框 <style> .mask { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: ...

  4. js 特效 手风琴效果

    $(document).ready(function(){ //定义展开的块 var lastBlock = $('#a1'); //展开的块的宽度 var maxWidth = 406; //折叠的 ...

  5. jq手风琴效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. animatescroll.min.js ~~~~ jq滚动效果 优化target自定义方法

    $(".meun>div[name='meun_nav']>a").eq(1).on("click",function(){ $("bod ...

  7. js&jq 发送验证码倒计时

    <input  type="text"   name=''  id="btn"> //发送验证码倒计时var wait=30; function t ...

  8. jquery 图片手风琴效果

    这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...

  9. 一步步教你css3手风琴效果的实现

    什么是手风琴效果? 首先我们先来看一段动画,如下图所示: 在上面动画中,我们不难发现,一排照片正常排列,当我鼠标移上(:hover)时,照片会变大显示并且把其它照片挤小.那么在鼠标来回移动的过程中,画 ...

随机推荐

  1. 解决“com.android.dex.DexIndexOverflowException: method ID not in [0, 0xffff]: 65536”问题(l转)

    同时在工程中引入了多个第三方jar包,导致调用的方法数超过了android设定的65536个(DEX 64K problem),进而导致dex无法生成,也就无法生成APK文件. 解决办法如下: 1.谷 ...

  2. Arduino 封装库

    这里是一个在Arduino平台下将常用的代码以库的形式封装的示例. 第一步:在Arduino的安装目录下的对应目录建立文件夹 C:\Program Files (x86)\Arduino\librar ...

  3. 配置新系统（Win7 x64）

    新装了一个Win7 x64系统.总结了一些系统配置需要注意的地方. 1. C盘空间 发现C盘被用去了50G的空间,在什么软件都没装的情况下,被用去这么多,感到不可思议. 打开控制面板->文件夹选 ...

  4. CSS基础（七）：z-index详解

    概念 z-index 属性设置元素的堆叠顺序.拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面. 层级关系的比较 1. 对于同级元素,默认(或position:static)情况下文档流后面的 ...

  5. [LeetCode] Range Sum Query - Immutable

    The idea is fairly straightforward: create an array accu that stores the accumulated sum fornums suc ...

  6. 【Xamarin报错】libpng warning : iCCP: Not recognizing known sRGB profile that has been edited

    报错: Xamarin Android 编译时发生以下错误: libpng warning : iCCP: Not recognizing known sRGB profile that has be ...

  7. 译：C#面向对象的基本概念 (Basic C# OOP Concept) 第二部分（封装，抽象，继承）

    6.封装 封装就是对外部类隐藏成员或变量.我已经说过房子的保安仅仅被限制在房子的入口处,不需要知道屋内发生了什么.房主对保安隐藏了屋内所发生的任何事,以便更安全.隐藏和限制就被称为封装. 例如我们有两 ...

  8. 【开源EFW框架】框架中自定义控件GridBoxCard使用实例说明

    回<[开源]EFW框架系列文章索引>        EFW框架源代码下载V1.3:http://pan.baidu.com/s/1c0dADO0 EFW框架实例源代码下载:http://p ...

  9. Android动画效果translate、scale、alpha、rotate详解

    动画类型 Android的animation由四种类型组成 XML中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面 ...

  10. net组件转化成COM组件

    第一步:生成秘钥文件 强名称工具 (Sn.exe) 有助于使用强名称对程序集进行签名.Sn.exe 提供了用于密钥管理.签名生成和签名验证的选项. 1.使用Visual Studio 命令 Visua ...