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


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

1.效果如图所示:

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相关内容感兴趣的读者可查看本站专题:《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。



相关阅读:
Win10桌面图标没了怎么办?Win10桌面快捷方式消失了解决方法
Nodejs爬虫进阶教程之异步并发控制
javascript时间函数大全
微软官方展示真正的Win10预览版10527版本信息
jQuery针对各类元素操作基础教程
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Oracle开发之窗口函数
win10关闭防火墙后如何关闭通知?win10关闭防火墙后总是弹出通知图文解决办法(两种)
ajax异步回调函数中给外部变量赋值的问题探讨
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
javascirpt实现2个iframe之间传值的方法
jquery 判断滚动条到达了底部和顶端的方法
C#中struct和class的区别详解
Linux中6个有趣的终端工具介绍
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 教学内容的生成与创设《风筝》六题(本站论坛稿) 入夜,细品你炖的心灵鸡汤 空间唠叨 幸福的职业 十七岁的遗憾 我得到了成功 儿童励志电影 贫瘠之地 一个有趣的梦 树的年龄 愿外甥女健康快乐的成长 电力公司年度工作总结 国民经济和社会发展第十一个五年规划实施情况的中期_党团工作总结 爱的回报 简历易被忽略的九大细节 男生总会误解女生的14个地方。【爱她就停下两分钟看 童年里最难忘的一天300字 镇人民政府2016年度工作总结 公司党风廉政建设责任制执行情况 沈奇岚:哲学不能烤面包 国际劳动节的由来 关于爱情的伤感句子和经典语录 一个人游走 孤单街头作文100字 恋爱心理误区大盘点 关于雪的优美语句 为什么会那么甜美呢 鸡蛋的实验 施蜇存 《唐诗百话》之杜甫(三) 壮观的百丈飞瀑 镇中心小学读书活动方案_活动方案 据说吃饭看得人都会忍不住喷出来! 最完美的女人 静夜思的全文意思 中学教师中级职称工作总结 温馨五月花--感恩母亲节 2015年幼儿园秋季开学通知 初三命题作文怎么写 老母鸡作文550字 小学六年级作文600字:我的奥运情结 2015劳动局工作总结 七一建党节慰问信 会变色的画 汤姆的眼珠掉下来 中华才子朱自清 我们的寂静,是一种美 【被历史遗忘的历史】系列小说之二:1959年鲍屯大队的春天(六) 关于长征的诗歌 毕业证明内容_证明书 读《淘气包马小跳之跳跳电视台》有感400字 《张小懒的幸福生活》小说10

Copyright © 2016 phpStudy |