一個鏈接展開全部/摺疊所有jQuery只能工作一次

Question

我有幾個隱藏的div在每個階段稱爲步驟。我試圖通過單擊一個按鈕打開所有div或摺疊所有步驟div。

我的意圖是，Expand View - all steps按鈕應該只打開該階段中的所有div。它正在工作一次，但停止工作後。

我成立了一個小提琴： http://jsfiddle.net/BuJz8/

jQuery的

jQuery(".phaseContent").hide(); 
jQuery(".stepsContent").hide(); 
//toggle the componenet with phase level 
jQuery(".phaseHeading .heading1").click(function() { 
    $(this).toggleClass("active"); 
    var th = jQuery(this).parent(); 
    jQuery(th).next(".phaseContent").slideToggle(500); 
    return false; 
}); 
jQuery(".stepsHeading .heading1").click(function() { 
    $(this).toggleClass("active"); 
    var th = jQuery(this).parent(); 
    jQuery(th).next(".stepsContent").slideToggle(500); 
    return false; 
}); 

//Expand and collapse toggle 

$(".accordion-expand-all").click(function() { 
    var contentAreas = $(this).parentsUntil(".phaseContent").find(".stepsContent"); 
    var expandLink = $(this); 
    $(contentAreas).show(); 
    $(expandLink).text('Collapse - all steps'); 
    $(this).parentsUntil(".phaseContent").find(".stepsHeading .heading1").toggleClass("active"); 
    if ($(contentAreas).is(":visible")) { 
     $(expandLink).click(function() { 
      $(contentAreas).hide(); 
      $(this).text('Expand - all steps'); 
     }); 
    } 
    return false; 
}); 

HTML

<!-- Start Phase --> 
    <div class="phaseBack"> 
     <!-- Start phase heading --> 
     <div class="phaseHeading"> 
      <span class="heading1"> Phase 1 </span> 
      <span class="headingSteps"></span> 
      <span class = "headingstepsdate" > < /span> 
      </span > 
     </div> 
     <!-- Start phase content --> 
     <div class="phaseContent"> 
      <div class="hr"></div> 
      <div class="phaseSummary"> 
      <div class="comment more">Lorem ipsum dolor sit amet, consectetur adipiscing elit.Vestibulum laoreet, nunc eget laor < /div> 
      <!--Expand steps button--> 
      <div class="expander"> 
       <p class="accordion-expand-holder"> 
        <a class="accordion-expand-all" id="st1" href="#">Expand View - all steps</a > < /p> 
      </div> 
      <!-- Start steps --> 
      <div class="stepsBack" > 
       <!-- Start steps heading --> 
       <div class="stepsHeading"> 
        <span class="heading1"> Steps 1 - Candidate type– Solicited by TM < /span> 
        <span class="middleheader">Completed on 
         <span class="makebold">01/02/13 < /span> 
        </span > 
        <span class="stepsRight"> 
       </div>          
       <!-- Start steps content --> 
       <div class="stepsContent"> 
        <div class="hr"></div > 
        <div class="stepsSummary" > 
         <div class="comment more"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.Vestibulum laoreet, nunc eget laoreet sagittis, quam ligula sodales orci, congue impe < /div> 
       </div> 
       <div class="stepsBody"> 
        <div class="hr" > </div> 
        <div class="stepsBodyLeft"> 
         <h2>References</h2 > 

        </div> 
       </div > 
      </div> 
      </div > 
      <!-- Start step 2 --> 
      <div class ="stepsBack" id = "aa" > 
      <div class = "stepsHeading" > 
       <span class = "heading1" > Steps 2 research < /span> 
       <span class="middleheader">Completed on 
        <span class="makebold"> 01/02/13 < /span> 
       </span > 
       < span class = "stepsRight" > < /span> 
      </div > 
      < div class = "stepsContent" > 
      < div class = "hr" > < /div> 
      <div class="stepsSummary"> 
       <div class="comment more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sagittis.</div > 
      < /div> 
      <div class="stepsBody"> 
       <div class="hr"></div > 
      < div class = "stepsBodyLeft" > 
       <h2> References < /h2> 
      </div > 
      < /div> 
     </div > 
    < /div> 
</div > 
< /div> 
</div > 
    <!-- Start Phase --> 
    < div class = "phaseBack" > 
     <!-- Start phase heading --> 
     < div class = "phaseHeading" > 
      < span class = "heading1" > Phase 2 < /span> 
      <span class="headingSteps"></span > 
      < span class = "headingstepsdate" > 
      < span class = "makebold" > < /span> 
      </span > 
     < /div> 
     <!-- Start phase content --> 
      <div class="phaseContent"> 
      <div class="hr"></div > 
      < div class = "phaseSummary" > 
       < div class = "comment more" > Lorem ipsum dolor sit amet, consectetur adipiscing elit.Vestibulum lao. < /div> 
       <!--Expand steps button--> 
       <div class="expander"> 
        <p class="accordion-expand-holder"> 
         <a class="accordion-expand-all" id="st1" href="#">Expand View - all steps</a > 
        < /p> 
       </div > 
       <!-- Start steps --> 
       < div class = "stepsBack" > 
        <!-- Start steps heading --> 
        < div class = "stepsHeading" > 
        < span class = "heading1" > Steps 1 - Candidate type < /span> 
        <span class="middleheader">Completed on 
         <span class="makebold">01/02/13 < /span> 
        </span > 
        < span class = "stepsRight" > < /span> 
        </div > 
        <!-- Start steps content --> 
        < div class = "stepsContent" > 
        < div class = "hr" > < /div> 
        <div class="stepsSummary"> 
        <div class="comment more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sagittis, quam ligula soda.</div > 
        < /div> 
        <div class="stepsBody"> 
        <div class="hr"></div > 
        < div class = "stepsBodyLeft" > 
         <h2> References < /h2> 
        </div > 
        < div class = "stepsBodyRight" >< /div> 
        </div > 
       < /div> 
      </div > 
      <!-- Start step 2 --> 
      < div class = "stepsBack" id = "aa" > 
       < div class = "stepsHeading" > 
        < span class = "heading1" > Steps 2 - MIRA research < /span> 
        <span class="middleheader">Completed on 
        <span class="makebold"> 01/02/13 < /span> 
        </span > 
        < span class = "stepsRight" > < /span> 
       </div > 
       < div class = "stepsContent" > 
        < div class = "hr" > < /div> 
        <div class="stepsSummary"> 
        <div class="comment more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sagittis.</div > 
        < /div> 
        <div class="stepsBody"> 
        <div class="hr"></div > 
        < div class = "stepsBodyLeft" > 
         <h2> References < /h2> 
        </div > 
        < div class = "stepsBodyRight" > < /div> 
        </div > 
       < /div> 
      </div > 
     < /div> 
     </div > 
    < /div> 

任何幫助表示讚賞。 在此先感謝

Answer 1

我不明白你的邏輯。所以我稍微修改了一下。

//Expand and collapse toggle 

$(".accordion-expand-all").click(function() { 

    var contentAreas = $(this).parentsUntil(".phaseContent").find(".stepsContent"); 

    var expandLink = $(this); 


    if (contentAreas.is(':visible')) { 
     contentAreas.hide(); 
     expandLink.text('Expand View - all steps'); 
    } else { 
     contentAreas.toggleClass("active").show(); 
     expandLink.text('Collapse - all steps'); 
    } 

    return false; 

}); 

試試這個。我讓它在更新的jsfiddle中工作：http://jsfiddle.net/BuJz8/1/

Answer 2

此問題是由於您在expandLink項目上綁定了多個click處理程序引起的。當綁定多個處理程序時，它們都會觸發。

你可以用你的代碼進行一些更改實現自己的目標：

$(".accordion-expand-all").click(function() { 
    var expandLink = $(this); 
    var contentAreas = $(expandLink).closest(".phaseContent").find(".stepsContent"); 

    // Toggle the content area visibility 
    $(contentAreas).toggle(); 

    // If the content area is now visible 
    if ($(contentAreas).is(':visible')) { 
     // Change it to the collapse text 
     $(expandLink).text('Collapse - all steps'); 
    } else { 
     // Change it to the expand text 
     $(expandLink).text('Expand - all steps'); 
    } 

    $(expandLink).closest(".phaseContent").find(".stepsHeading .heading1").toggleClass("active"); 

    return false; 
}); 

DEMO

注：您可能希望使用.closest()而不是.parentsUntil()如果你只是想選擇一個最接近的父親。後者選擇所有祖先，但不包括選擇器匹配的元素。