jQuery手风琴特效

最新推荐文章于 2025-09-10 09:07:54 发布

转载最新推荐文章于 2025-09-10 09:07:54 发布 · 90 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ahwhyfy/archive/2013/02/21/2920882.html

文章标签：

#javascript #ViewUI

本文介绍了使用jQuery实现手风琴特效的两种方法。一种是点击展开和收起列表项，另一种是仅显示当前点击的列表项并隐藏其他项。通过jQuery的show, hide和slideToggle方法控制列表项的显示和隐藏。

jQuery手风琴特效：

HTML代码如下：

<ul id="Nav">
    <li>
        <a href="#">测试第一行</a>
        <ul>
            <li><a href="#">第一行</a></li>
            <li><a href="#">第一行</a></li>
            <li><a href="#">第一行</a></li>
        </ul>
    </li>
    <li>
        <a href="#">测试第二行</a>
        <ul>
            <li><a href="#">第二行</a></li>
            <li><a href="#">第二行</a></li>
            <li><a href="#">第二行</a></li>
        </ul>
    </li>
    <li>
        <a href="#">测试第三行</a>
        <ul>
            <li><a href="#">第三行</a></li>
            <li><a href="#">第三行</a></li>
            <li><a href="#">第三行</a></li>
        </ul>
    </li>
    <li>
        <a href="#">测试第四行</a>
        <ul>
            <li><a href="#">第四行</a></li>
            <li><a href="#">第四行</a></li>
            <li><a href="#">第四行</a></li>
            <li><a href="#">第四行</a></li>
        </ul>
    </li>    <li>
        <a href="#">测试第五行</a>
        <ul>
            <li><a href="#">测试第五行</a></li>
            <li><a href="#">测试第五行</a></li>
            <li><a href="#">测试第五行</a></li>
            <li><a href="#">测试第五行</a></li>
            <li><a href="#">测试第五行</a></li>
        </ul>
    </li>
</ul>

CSS代码如下：

#Nav,#Nav ul {list-style-type:none;margin: 0;padding: 0;width: 150px;;}
#Nav a{ display:block;}
#Nav li{line-height:18px;}
#Nav li ul li a {background: #ccc;color: #000;padding-left: 20px;}
#Nav ul li { margin-top:1px; line-height:18px;}
#Nav li a {background: #333;color: #fff;text-decoration:none; font-size:12px;}
#Nav li a:hover {background: #000; color: #FF0000;}

效果一：默认列表收起，点击展开列表，展开点击则收起列表。

jQuery代码如下：

function Nav01() {
  $('#Nav ul').hide();
  $('#Nav li a').click(
    function() {
        $(this).next().slideToggle('normal');    
      }
    );
  }
$(document).ready(function() {Nav01();});

原理就是先将所有的UL隐藏，然后点击显示当前UL。

slideUp | slideDown | slideToggle，up是收起，Down是展开，sildeToggle是滑动切换，当前若为收起的就展开，展开的则收起。默认为 "normal"，这里可以控制速度，可以精确到毫秒，比如设置个数值1000，或者1，或者slideToggle('slow');slideToggle('fast');测试可以看到不同的效果。

效果二：默认展开第一行列表，只显示当前点击的列表，其它则收起。

jQuery代码如下：

function Nav02() {
  $('#Nav ul').hide();
  $('#Nav ul:first').show();
  $('#Nav li a').click(
    function() {
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        return false;
        } 

      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#Nav ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
        }
      }
    );
  }
$(document).ready(function() {Nav02();});

效果二原理是：

首先定义一个Nav02的方法，然后隐藏ID为Nav下的所有UL，显示第一个UL。
当ID为Nav下li里的a被点击时，当前被点击的元素的下一个对象被赋予checkElement，假设checkElement是UL并且它是显示的话，就不执行了。
假设checkElement他的对象是UL并且它是不显示的话，id为Nav的下的UL则展开。checkElement则收起。

详细注解：

function Nav02() {
//定义一个叫Nav02的方法
  $('#Nav ul').hide();
  //隐藏#Nav下的所有ul
  $('#Nav ul:first').show();
  //#Nav下的第一个UL显示
  
  //当#Nav li下的a被点击时触发方法
  $('#Nav li a').click(                    
    function() {
      var checkElement = $(this).next();
      //当前被点击的元素的下一个对象被赋予checkElement
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
      //当前被点击的元素的下一个对象是UL，并且它是显示的话
          return false;
        } 
        
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
      //如果这个对象是UL，并且对象没有显示
        $('#Nav ul:visible').slideUp('normal');
        //#Nav下的ul显示，执行slideUp('normal')的方法，也就是展开。
        checkElement.slideDown('normal');
        //checkElement执行slideUp('normal')的方法，也就是收起。
        return false;
        }
      }
    );
  }
$(document).ready(function() {Nav02();});
//当页面开启时加载Nav02方法