jQuery实现左侧导航模块的显示与隐藏效果

前端之家收集整理的这篇文章主要介绍了jQuery实现左侧导航模块的显示与隐藏效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了jQuery实现左侧导航模块的显示与隐藏效果分享给大家供大家参考,具体如下:

1.效果如图所示:

2.HTML代码

产品分类
    衬衫
    • 短袖衬衫
    • 长袖衬衫
  • 卫衣
    • 开襟卫衣
    • 套头卫衣
  • 裤子
    • 休闲裤
    • 免烫卡其裤
    • 牛仔裤
    • 短裤

3.jQuery代码:

标签的

元素上一个节点正是需要隐藏的,可以使用$(".module_up_down").prev()方法来获取

元素的 上一个同辈节点,然后使用slideToggle()动画方法来使元素向上收缩或向下展开 */ $(function(){ $(".module_up_down").toggle(function(){ var $self = $(this); $self.prev().slideToggle(600,function(){ $("img",$self).attr("src","images/up.gif"); }); },function(){ var $self = $(this); $self.prev().slideToggle(600,"images/down.gif"); }); }) })

元素内,有三个子
  • 元素,每个子
  • 元素内 又有元素和
      元素。当点击""元素的时候,与它同辈的
        元素如 果处于显示状态,则隐藏;如果处于隐藏状态,则显示它。因此需要先判断
          元素 是否处于显示状态,然后再分别进行其它操作 */ $(function(){ $(".m-treeview > li > span").click(function(){ // 注意用的是 子选择器 ( > ) var $ul = $(this).siblings("ul"); if($ul.is(":visible")){ $(this).parent().attr("class","m-collapsed"); $ul.hide(); }else{ $(this).parent().attr("class","m-expanded"); $ul.show(); } return false; }) })
  • 更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》、《》及《用法总结》

    希望本文所述对大家jQuery程序设计有所帮助。

    猜你在找的jQuery相关文章