最新在学习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. LeetCode: Remove Nth Node From End of List 解题报告

    Remove Nth Node From End of List Total Accepted: 46720 Total Submissions: 168596My Submissions Quest ...

  2. C#.Net 上传图片,限制图片大小,检查类型完整版

    C#.Net 上传图片,限制图片大小,检查类型完整版 源代码: 处理图片类,如检查图片大小,按宽度比例缩小图片 public class CImageLibrary{   public enum Va ...

  3. 理解vmp

    原文作者: 海风月影_百度空间 vmp里面只有1个逻辑运算指令 not_not_and 设这条指令为PP(a,b) = ~a & ~b 这条指令的神奇之处就是能模拟 not and or xo ...

  4. SQL Server 连接问题圣经－命名管道

    SQL Server 连接问题圣经-命名管道 (1) APGC DSD Team 12 Jan 2011 1:24 AM 3 一.前言 在使用SQL Server 的过程中,用户遇到的最多的莫过于连接 ...

  5. 如何做好IT运营.

    定义IT管理的重点在于业务策略与 IT 部门提供的服务之间的一致性.IT 管理可建立必要的管理机制来确保可预测的 IT 服务交付,从而确保业务流程和 IT 流程之间的联系.IT 管理传统上属于CIO. ...

  6. C# 调用 WebService 连接ORACLE 11g

    这几天开发一个WebService遇到很多问题,记录下来顺便帮助一下以后遇到情况的人. 我是通过ADO.NET来连接ORACLE的,也可以用ORACLE提供的ODP.NET. 通过正常的连接后部署II ...

  7. iOS8设置应用图标红点的权限问题

    在ios8中,直接设置application badge value会出错 1 [[UIApplication sharedApplication] setApplicationIconBadgeNu ...

  8. ACE代码编辑器，代码提示，添加自定义数据

    //设置自动提示代码 var setCompleteData = function(data) { var langTools = ace.require("ace/ext/language ...

  9. ubuntu14.04服务版/etc/init.d/smbd restart无效的解决方法

    刚装的ubuntu14.04配置完smbd发现service或者/etc/init.d/smbd restart都不显示任何输出,也没起作用 echo $?输出1,查看脚本发现 if init_is_ ...

  10. MFC窗口和控件大小等比例变化

    第一步:OnInitDialog里保存对话框及其所有子窗体的Rect区域 CRect rect; GetWindowRect(&rect); listRect.AddTail(rect);// ...