jQuery實(shí)現(xiàn)左側(cè)導(dǎo)航模塊的顯示與隱藏效果

更新時(shí)間：2016年07月04日 10:23:26 作者：yanhui_wei

這篇文章主要介紹了jQuery實(shí)現(xiàn)左側(cè)導(dǎo)航模塊的顯示與隱藏效果,涉及jQuery相應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)左側(cè)導(dǎo)航模塊的顯示與隱藏效果。分享給大家供大家參考，具體如下：

1.效果如圖所示：

2.html代碼：

<div class="content_left">
  <div class="global_module news">
   <h3>最新動(dòng)態(tài)</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="長袖雪紡衫單穿內(nèi)搭都超美.">長袖雪紡衫單穿內(nèi)搭都超美.</a></li>
    </ul>
   </div>
   <p class="module_up_down"><img src="images/down.gif" alt="" /></p>
  </div>
  <div class="global_module procatalog">
   <h3>產(chǎn)品分類</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>衛(wèi)衣</span>
     <ul>
      <li ><span>開襟衛(wèi)衣</span></li>
      <li ><span>套頭衛(wèi)衣</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代碼：

/*模塊展開和關(guān)閉*/
/*
1.在結(jié)構(gòu)中，包含<img>標(biāo)簽的<p>元素上一個(gè)節(jié)點(diǎn)正是需要隱藏的，可以使用$(".module_up_down").prev()方法來獲取<p>元素的
上一個(gè)同輩節(jié)點(diǎn)，然后使用slideToggle()動(dòng)畫方法來使元素向上收縮或向下展開
*/
$(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");
     });
   })
})

/*產(chǎn)品樹展開和關(guān)閉*/
/*
1.在class為"m-treeview"的<ul>元素內(nèi)，有三個(gè)子<li>元素，每個(gè)子<li>元素內(nèi)
又有<span>元素和<ul>元素。當(dāng)點(diǎn)擊"<span>"元素的時(shí)候，與它同輩的<ul>元素如
果處于顯示狀態(tài)，則隱藏；如果處于隱藏狀態(tài)，則顯示它。因此需要先判斷<ul>元素
是否處于顯示狀態(tài)，然后再分別進(jìn)行其它操作
*/
$(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;
  })
})

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: