如何隱藏一個孩子的div和使用上點擊

Question

<li> 
    <h4 class="title-exp-coll title-expand"> 
    <span class="exp-coll"></span>Bookmarks</h4> 
    <div class="item-list"> 
    <ul>  
    <li class="first"><div>first Asset</div></li> 
    <li><div>Latest Updates</div></li> 
    <li><div>asset image</div></li> 
    <li><div>test Asset 1</div></li> 
    </ul></div> 
    </li> 

    <li> 
    <h4 class="title-exp-coll title-expand"> 
    <span class="exp-coll"></span>Menu</h4> 
    <p>No menu.</p> 
    </li> 

    <li> 
    <h4 class="title-exp-coll title-expand"> 
    <span class="exp-coll"></span>Main Menu</h4> 
    <div class="item-list"> 
    <ul>  
    <li><div>asset image</div></li> 
    <li><div>test Asset 1</div></li> 
    </ul></div> 
    </li> 

下面的jQuery的父添加類名是代碼：

我預期的結果是，當我點擊跨類「EXP-科爾」內在<h4>標籤

1. 相應下一個<div>或下一個<p>標籤應隱藏

2. 在h4標籤中，類「title-expand」應該被移除並且應該添加「title-collapse」。

3. 在平均時間，當我點擊跨度類「exp-coll」第二次相反應該發生。

4. 即對應下一個<div>或下一個<p>標記應SHOW

5. 在H4標記的類「稱號崩潰」應去掉「稱號-擴大」應該是添加。

怎麼可以這樣使用jQuery ..

任何幫助將感謝和感激做......

Answer 1

使用此：

$(function(){ 

    $("h4 span.exp-coll").click(function(){ 

     if($(this).parents("h4").hasClass("title-expand")){ 
      //number 1 
      $(this).next("div").hide(); 
      //Number 2 
      $(this).parents("h4").removeClass("title-expand").addClass("title-collapse");    
     } 
     else{ 

      //number 4 
      $(this).next("div").show(); 
      //Number 5 
      $(this).parents("h4").removeClass("title-collapse").addClass("title-expand");   

     } 

    }); 

}); 

好運

Answer 2

使用jQuery的。接下來（）和.toggle（）函數！雖然，fadetoggle看起來好一點：

http://api.jquery.com/next/

http://api.jquery.com/toggle/

http://api.jquery.com/fadeToggle/

Answer 3

$("span.exp-coll").click(expand_collapse); 

function expand_collapse() { 
     flag = $(this).parent("h4").hasClass("title-expand"); 
     if(flag){ 
      $(this).parents('li').children('div, p, form').slideUp('slow'); 
      $(this).parents("h4").removeClass("title-expand").addClass("title-collapse"); 
      flag = false; 
     } 
     else{ 
      $(this).parents('li').children('div, p, form').slideDown('slow'); 
      $(this).parents("h4").removeClass("title-collapse").addClass("title-expand"); 
      flag = true; 
     } 
    }