最新在学习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. Windows调试学习笔记：（一）WinDBG中加载SOS和CLR

    最近产品环境出现了部分服务器当机情况,虽然重启之后问题就不出现了.但本着彻底解决问题的态度,想要找到root cause.多次尝试Visual Studio失败(可能是代码惊醒了优化和签名)之后,决定 ...

  2. JAVA本地远程连接linux程序监控状态

    环境:  1.本地window 2.程序部署在centos   一,启动访问权限安全守护程序 新建文件:jstatd.all.policy ,注意路径 grant codebase "$JA ...

  3. Castle.ActiveRecord (V3.0.0.130)

    为项目添加 Castle.ActiveRecord 的引用: 安装成功后,查看项目的引用如图: 配置文件 App.Config (MySQL) <?xml version="1.0&q ...

  4. LLVM

    http://blog.csdn.net/snsn1984/article/details/41077763

  5. CSS基础（三）：选择器

    常用选择器 元素选择器,即html标记如div,ul,li,p,h1~h6,table等. p { font-size:14px; } h1 { color:#F00; } 复合选择器, 由两个选择器 ...

  6. Selenium自动化测试项目案例实践公开课

    Selenium自动化测试项目案例实践公开课: http://gdtesting.cn/news.php?id=55

  7. jsp页面间传递参数 中文乱码问题(zz)

      jsp页面间传递参数 中文乱码问题 1.传递参数 var url = "*****Test.jsp?param1="+encodeURI(encodeURI(str));//对 ...

  8. MVC5入门

    http://www.cnblogs.com/youring2/p/mvc-5-examining-the-edit-methods-and-edit-view.html

  9. Android代码优化——使用Android lint工具

    作为移动应用开发者,我们总希望发布的apk文件越小越好,不希望资源文件没有用到的图片资源也被打包进apk,不希望应用中使用了高于minSdk的api,也不希望AndroidManifest文件存在异常 ...

  10. ruby include和exclude区别

    很久没玩ruby了,今天看源码的时候,看到extend硬是缓不过神了,Google下extend和include的区别,做个记录 在class中include module, 那么module中的方法 ...