0

我正在尝试解决如何在按下 .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-->
4

2 回答 2

2

你可以这样做：

$('.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;
});

你可以在这里试一试，为使用的可怕、可怕的颜色道歉。

我们正在做的是在click所有按钮上，我们正在检查操作应该是什么（如果有任何隐藏，则显示它们，如果不是全部隐藏）。在每个的点击中，.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;
});

你可以在这里试一试

于 2010-07-23T11:03:27.993 回答
0

这应该是您在点击时要查找的内容.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;
});
于 2010-07-23T10:32:20.880 回答