<div class="content_left">
  <div class="global_module news">
   <h3>最新動態(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>

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

/*產(chǎn)品樹展開和關(guān)閉*/
/*
1.在class為"m-treeview"的<ul>元素內(nèi)，有三個子<li>元素，每個子<li>元素內(nèi)
又有<span>元素和<ul>元素。當(dāng)點(diǎn)擊"<span>"元素的時候，與它同輩的<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;
  })
})