Использование Jquery для расширения всех ответов ниже вопроса

Question

Я пытаюсь выяснить, как развернуть все ответы ниже вопроса при нажатии диапазона .allopener. В настоящее время пользователи могут расширять каждый ответ по отдельности, но не все сразу. Любые советы будут высоко оценены. На странице будет много элементов.

Кнопка промежутка allopener откроет оставшиеся скрытые классы .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;
});

Вы можете попробовать здесь , извиняюсь за ужасные, ужасные используемые цвета.

То, что мы делаем, - на 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;
});

Вы можете попробовать здесь

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;
});