0

.allopenerスパンが押されたときに、質問の下にあるすべての回答を展開する方法を見つけようとしています。現在、ユーザーは各回答を個別に展開できますが、一度にすべてを展開することはできません。ヒントをいただければ幸いです。1ページに多くのアイテムがあります。

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、アクションがどうあるべきかをチェックしているすべてのボタンです（非表示になっている場合は表示し、非表示になっていない場合は表示します）。それぞれのクリックで、.answeropenerahy.textノードが非表示のままになっているかどうかを確認しています...したがって、のスタイル.allopenerは正しいです。たとえば、最後の回答が展開さhighlightiれると、クラスが削除されます。クリックすると、すべてのノードが非表示になるためです。 .soの状態は、これを正しく反映するようになりました。

オーバーロードを使用することで、これをかなり短くする.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 に答える