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 相关文章推荐
JavaScript开发规范要求(规范化代码)
Aug 16 Javascript
关于ExtJS4.1:快捷键支持的问题
Apr 24 Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 Javascript
jQuery学习总结之jQuery事件
Jun 30 Javascript
Javascript中数组方法汇总(推荐)
Apr 01 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
Bootstrap表单Form全面解析
Jun 13 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 Javascript
详解Vue取消eslint语法限制
Aug 04 Javascript
微信小程序实现左右列表联动
May 19 Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 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
来自PHP.NET的入门教程
2006/10/09 PHP
php循环检测目录是否存在并创建(循环创建目录)
2011/01/06 PHP
php合并数组中相同元素的方法
2014/11/13 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
2010/07/24 Javascript
jquery 元素相对定位代码
2010/10/15 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
python内置函数sorted()用法深入分析
2019/10/08 Python
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
金山毒霸系列的笔试题
2013/04/13 面试题
国培教师自我鉴定
2014/02/12 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
中药学专业求职信
2014/05/31 职场文书
初级职称评定工作总结
2015/08/13 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android