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程序设计有所帮助。

    相关文章

    页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
    jQuery实时显示日期、时间 html: <span id=&quot...
    jQuery 添加水印 <script src="../../../.....
    中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
    1. 用Response.Write方法 代码如下: Response.Write(&q...
    Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...