使用 Jquery 扩展以下问题的所有答案

Question

我正在尝试弄清楚当按下 .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-->

Answer 1

你可以这样做：

$('.answeropener').click(function() {
  $(this).toggleClass("highlightc").next().toggle();
  $('.allopener').toggleClass("highlighti", $('.text:hidden').length > 0);
  return false;
});
$('.allopener').click(function() {
  var any = $('.text:hidden').length > 0;
  $('.text').toggle(any).prev().toggleClass('highlightc', any);
  $(this).toggleClass("highlighti", any);
  return false;
});

你可以在这里尝试一下，对于可怕的事情深表歉意，使用了可怕的颜色。

我们正在做的是在单击所有按钮时，我们检查应该执行什么操作（如果有任何隐藏，则显示它们，如果没有全部隐藏）。在每个 .answeropener 的点击中，我们检查它是否隐藏了 .text 节点...因此 .allopener 的样式> 是正确的，例如，最后一个答案被扩展，它的 highlighti 类被删除，因为单击时它将隐藏它们全部......所以它的状态现在正确地反映了这一点。

我们可以通过使用 .toggleClass(class, switch) 重载，它允许您传递一个布尔值来告诉它该类是否应该打开或关闭。

---

更新评论，这是一个适用于每个问题的版本：

$('.answeropener').click(function() {
    var q = $(this).closest('.item');
    $(this).toggleClass("highlightc").next().toggle();
    q.find('.allopener').toggleClass("highlighti", q.find('.text:hidden').length > 0);
    return false;
});
$('.allopener').click(function() {
    var q = $(this).closest('.item'), any = q.find('.text:hidden').length > 0;
    q.find('.text').toggle(any).prev().toggleClass('highlightc', any);
    $(this).toggleClass("highlighti", any);
    return false;
});

您可以在这里尝试一下

Answer 2

这应该是您点击 .allopener 时要查找的内容：

$('.allopener').click(function() {

    $(this).toggleClass("highlighti");
    var showingAll = $(this).hasClass("highlighti");

    // Loops through all answers and shows all or hides all as determined above
    $('.answeropener').each(function(){
        if(showingAll){
            $(this).next().show(); 
            $(this).addClass("highlightc");
        } else {
            $(this).next().hide(); 
            $(this).removeClass("highlightc");
        } 
    });         

    return false;
});