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 相关文章推荐
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
Feb 09 Javascript
use jscript List Installed Software
Jun 11 Javascript
JavaScript 对象、函数和继承
Jul 07 Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
JavaScript动态添加列的方法
Mar 25 Javascript
javascript实现2016新年版日历
Jan 25 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
vue.js实现请求数据的方法示例
Feb 07 Javascript
JQuery常见节点操作实例分析
May 15 jQuery
vue 翻页组件vue-flip-page效果
Feb 05 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
将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 无限级数据JSON格式及JS解析
2010/07/17 PHP
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
PHP生成随机字符串(3种方法)
2015/09/25 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
Laravel程序架构设计思路之使用动作类
2018/06/07 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python标准库之sqlite3使用实例
2014/11/25 Python
python中os操作文件及文件路径实例汇总
2015/01/15 Python
Python自定义类的数组排序实现代码
2016/08/28 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
python的pstuil模块使用方法总结
2019/07/26 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
Python实现数字的格式化输出
2020/08/01 Python
越南综合购物网站:Lazada越南
2019/06/10 全球购物
.NET程序员的几道面试题
2012/06/01 面试题
实习生评语
2014/04/26 职场文书
报考公务员诚信承诺书
2014/08/29 职场文书
兴趣班停课通知
2015/04/24 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
单身证明格式样本
2015/06/15 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android