jquery - 一个链接全部展开/全部折叠 jQuery 只工作一次

Question

我在每个阶段 div 中有几个隐藏的 div，称为 Steps。我正在尝试通过单击一个按钮打开所有 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()后者选择直到但不包括选择器匹配的元素的所有祖先。