我正在尝试解决如何在按下 .allopener 跨度时扩展问题下方的所有答案。用户目前可以单独展开每个答案,但不能一次全部展开。任何提示将不胜感激。一个页面上会有很多项目。
allopener span 按钮将打开此项目中剩余的未隐藏的 .text 类,以显示问题的答案,就好像有人单独单击了每个类的展开一样。请注意,第一次按下时,可能已展开部分、全部或无答案。此外,当再次按下它时,所有答案都将被隐藏。如果再次按下,所有答案都将被扩展。如果再次,所有隐藏。
当按下时,每个答案的展开按钮的背景也会相应改变:即打开和关闭每个单独展开按钮上的 .highlightc 类,就像切换一样。
jQuery:
$('.answeropener').click(function() {
$(this).next().toggle(); //unhide/hide the sibling text answer
$(this).toggleClass("highlightc"); //alternate the background of this button
return false;
});
$('.allopener').click(function() {
$(this).toggleClass("highlighti"); //toggles background of button
$(this).
$(this).
return false;
});
CSS:
.highlighti {background: #FFFFFF;}
.highlightc {border-right:1px solid #DCDCDC;}
.text {display:none;}
html:
<div class="item" id="question1">
<div class="tophead">How do you skin a cat?</div>
<div class="bottomhead">by Gerald, 1 hour ago <span class="allopener">open/close</span> <span>all answers below<span>
<div class="answers">
<div class="answer"><div class="answernumber">1</div><div class="answerhead">answer by Harold <span title="expand this comment" class="answeropener">expand</span><div style="display: block;" class="text">this is my answer</div></div></div>
<div class="answer"><div class="answernumber">2</div><div class="answerhead">answer by Jesse <span title="expand this comment" class="answeropener">expand</span><div style="display: block;" class="text">this is my answer too</div></div></div>
<div class="answer"><div class="answernumber">3</div><div class="answerhead">answer by Seth <span title="expand this comment" class="answeropener">expand</span><div style="display: block;" class="text">I don't know</div></div></div>
</div> <!--answers-->
</div> <!--bottomhead-->
</div> <!--item-->