我有几个隐藏的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>
感谢任何帮助。 提前致谢
答案 0 :(得分：0)
我无法理解你的逻辑。所以我稍微修改了一下。
//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/
答案 1 :(得分：0)
问题是由您在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;
});
<强> DEMO
注意：如果您只是想选择最近的父母，则可能需要使用.closest()代替.parentsUntil()。后者选择所有祖先，但不包括选择器匹配的元素。