我在每个阶段 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>
任何帮助表示赞赏。提前致谢