最新在学习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. GPS accuracy in Android

    Get the estimated accuracy of this location, in meters. We define accuracy as the radius of 68% conf ...

  2. SQL SERVER2012中使用游标来备份数据库

    在SQL SERVER中,添加JOB,可以使用以下语句设置定期备份数据库. DECLARE @name VARCHAR(50)--databasename DECLARE @path VARCHAR( ...

  3. Volley 实现原理解析(转)

    Volley 实现原理解析 转自:http://blog.csdn.net/fengqiaoyebo2008/article/details/42963915 1. 功能介绍 1.1. Volley ...

  4. JS - Object and Property的删除用法

    在JS中,Object和Property的删除用法: var myObject = {name:'jimmy', age:12, height:123} delete myObject["j ...

  5. 三种ViewController跳转的异同

    - (void)presentViewController:(UIViewController *)viewControllerToPresent animated:(BOOL)flag comple ...

  6. IIS+PHP+MYSQL安装配置

    首先下载php-5.2.0-win32.zip,mysql-noinstall-5.0.22-win32.zip和phpMyAdmin-2.9.1.1-all-languages.zip.这三个文件的 ...

  7. python 字符串比较

    cmp方法比较两个对象,并根据结果返回一个整数.cmp(x,y)如果X< Y,返回值是负数 如果X>Y 返回的值为正数. sStr1 = 'strch'sStr2 = 'strchr'pr ...

  8. FAILURE: Build failed with an exception.

    FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:installD ...

  9. 我所研究过的 ASP.NET MVC 或者 .NET 或者 ORM 或者框架的开源项目

    ASP.NET MVC 的开源项目有很多,这里列出我所研究过的: SocialGoal v1.0.0 prodinner nopCommerce SmartStore.NET 由于今天才做收集工作,可 ...

  10. Windows 服务开发框架介绍 - Topshelf

    关于 TopShelf Topshelfis a framework for hosting services written using the .NET framework. The creati ...