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


Posted in Javascript onJuly 04, 2016

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

1.效果如图所示:

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

2.html代码:

<div class="content_left">
  <div class="global_module news">
   <h3>最新动态</h3>
   <div class="scrollNews" >
    <ul>
    <li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
    <li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
    <li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>
    <li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>
    <li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>
    <li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>
    <li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>
    </ul>
   </div>
   <p class="module_up_down"><img src="images/down.gif" alt="" /></p>
  </div>
  <div class="global_module procatalog">
   <h3>产品分类</h3>
   <ul class="m-treeview">
    <li class="m-expanded">
     <span>衬衫</span>
     <ul>
      <li><span>短袖衬衫</span></li>
      <li><span>长袖衬衫</span></li>
     </ul>
    </li>
    <li class="m-expanded">
     <span>卫衣</span>
     <ul>
      <li ><span>开襟卫衣</span></li>
      <li ><span>套头卫衣</span></li>
     </ul>
    </li>
    <li class="m-expanded">
     <span>裤子</span>
     <ul>
      <li><span>休闲裤</span></li>
      <li><span>免烫卡其裤</span></li>
      <li><span>牛仔裤</span></li>
      <li><span>短裤</span></li>
     </ul>
    </li>
   </ul>
   <p class="module_up_down"><img src="images/down.gif" alt="" /></p>
  </div>
</div>

3.jQuery代码:

/*模块展开和关闭*/
/*
1.在结构中,包含<img>标签的<p>元素上一个节点正是需要隐藏的,可以使用$(".module_up_down").prev()方法来获取<p>元素的
上一个同辈节点,然后使用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,function(){
       $("img",$self).attr("src","images/down.gif");
     });
   })
})
/*产品树展开和关闭*/
/*
1.在class为"m-treeview"的<ul>元素内,有三个子<li>元素,每个子<li>元素内
又有<span>元素和<ul>元素。当点击"<span>"元素的时候,与它同辈的<ul>元素如
果处于显示状态,则隐藏;如果处于隐藏状态,则显示它。因此需要先判断<ul>元素
是否处于显示状态,然后再分别进行其它操作
*/
$(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程序设计有所帮助。

Javascript 相关文章推荐
jquery remove方法应用详解
Nov 22 Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
jQuery的live()方法对hover事件的处理示例
Feb 27 Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
JavaScript栈和队列相关操作与实现方法详解
Dec 07 Javascript
Vue+Django项目部署详解
May 30 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 #Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 #Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 #Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 #Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 #Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 #Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 #Javascript
You might like
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
PHP对象转换为数组函数(递归方法)
2012/02/04 PHP
让CodeIgniter的ellipsize()支持中文截断的方法
2014/06/12 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
python向字符串中添加元素的实例方法
2019/06/28 Python
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
波兰补充商店:Muscle Power
2018/10/29 全球购物
strstr()的简单实现
2013/09/26 面试题
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
大众服装店创业计划书范文
2014/01/01 职场文书
上班看电影检讨书
2014/02/12 职场文书
十佳中学生事迹材料
2014/06/02 职场文书
社会学专业求职信
2014/07/17 职场文书
小学生纪念九一八事变演讲稿
2014/09/14 职场文书
岳麓书院导游词
2015/02/03 职场文书
生产实习心得体会范文
2016/01/22 职场文书
《三国志》赏析
2019/08/27 职场文书
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python