jquery - 1つのリンクすべてを展開/すべて折りたたむjQueryは1回だけ機能します

Question

各フェーズのdivには、ステップと呼ばれる非表示のdivがいくつかあります。1つのボタンをクリックして、すべての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

clickこの問題は、アイテムに複数のハンドラーをバインドすることによって発生していexpandLinkます。複数のハンドラーをバインドすると、それらはすべてトリガーされます。

コードにいくつかの変更を加えるだけで、目標を達成できます。

$(".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;
});

デモ

注：最も近い単一の親のみを選択しようとしている場合は、.closest()代わりに使用することをお勧めします。.parentsUntil()後者は、セレクターによって一致する要素までのすべての祖先を選択しますが、これは含まれません。