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中getJSON在asp.net中的使用说明
Mar 10 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
jquery实现图片随机排列的方法
May 04 Javascript
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
浅谈angular2路由预加载策略
Oct 04 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 Javascript
关于layui时间回显问题的解决方法
Sep 24 Javascript
javascript实现简单打字游戏
Oct 29 Javascript
Vuex中的Mutations的具体使用方法
Jun 01 Javascript
three.js显示中文字体与tween应用详析
Jan 04 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 读取文件的正确方法
2009/04/29 PHP
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
thinkphp的c方法使用示例
2014/02/24 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
PHP7 标准库修改
2021/03/09 PHP
JavaScript 对象模型 执行模型
2009/12/06 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
JavaScript类的继承多种实现方法
2020/05/30 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
python测试mysql写入性能完整实例
2018/01/18 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
12岁生日演讲稿
2014/05/14 职场文书
2014年六一儿童节演讲稿
2014/05/23 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书
《藏戏》教学反思
2016/02/23 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS