最新在学习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. 单元测试mock之mockito使用

    先来一个简单的例子来感受一下 外部接口类:TestService.java package com.yzl.mock; /** * 测试用服务 * * @author yangzhilong */ p ...

  2. 4kbps～15kbps语音编码器基础框架ACELP

  3. Pro ASP.NET MVC –第四章 语言特性精华

    C#语言有很多特性,并不是所有的程序员都了解本书我们将会使用的C#语言特性.因此,在本章,我们将了解一下作为一个好的MVC程序员需要了解C#语言的特性. 每个特性我们都只是简要介绍.如果你想深入了解L ...

  4. 论一次iOS面试

    最近觉得现在所在公司平台用户量太少,自身技术已经到了一个瓶颈,是时候需要换一个用户量多的平台,好好研究下iOS的性能优化.内存优化等问题了. 所面试的公司由于一些默认的规定,就不多说了,大致是面了一个 ...

  5. 数据人员Sql必会列转行

    列转行上一篇博客已经介绍过了. 下面介绍一下行转列的实现 假设我们有一个数据表: CREATE TABLE row_to_line ( ) NOT NULL, -- 学生名称 yingyu integ ...

  6. right-click an action, missing "Go to slot"

    According to the tutorial,to connect the actions to slots, right-click an action and select Go to sl ...

  7. 做mapx、ArcEngine的二次开发出现“没有注册类别 (异常来自 HRESULT:0x80040154 (REGDB_E_CLASSNOTREG)”

    转自:http://blog.sina.com.cn/s/blog_638e61a40100ynnc.html 出现这个问题主要是因为32位操作系统和64位操作系统存在兼容性问题. 解决方案: 1.鼠 ...

  8. [c++] Collection of key and difficult points

    Operator Overload 1. 在重载下标运算符时(数组符号):不可重载为友元函数,必须是非static类的成员函数. why 2. overload ++ 时,如果是:   int a;  ...

  9. Linux网络管理

    关于OSI七层模型.TCP五层模型.TCP的三次握手.HTTP协议.DNS解析等相关的网络基础知识请参考我整理的一篇博客:http://www.cnblogs.com/wxisme/p/4699049 ...

  10. 手把手教你从购买vps到搭建一个node服务器

    要准备什么? 1.5刀 2.最好有FQ软件(可以用蓝灯) let's Go! 一.vps购买 vps可以选择digital ocean(do) 链接 ,由于是外国网站,响应比较慢,所以最好翻个墙. g ...