Jquery открыть вопрос часть и закрыть другой вопрос часть - PullRequest
Новая
       15

Jquery открыть вопрос часть и закрыть другой вопрос часть

1 голос
/ 23 января 2012

У меня есть следующий код: 

<div class="faq">
<h1 class="question">Question</h1>
<p class="answer">Answer</p>
</div>

<div class="faq">
<h1 class="question"> Question </h1>
<p class="answer">Answer</p>
</div>

<div class="faq">
<h1 class="question"> Question </h1>
<p class="answer">Answer</p>
</div>

И мне нравится нажимать на h1, чтобы развернуть ответ. тег <p> установлен для отображения: нет, но это jquery, который меня беспокоит. Точные требования:

  • При щелчке h1 соответствующий ответ должен открыться
  • При нажатии другого h1 ответы на другие вопросы должны закрыться, и соответствующий ответ должен открыться
  • При нажатии h1, когда этот ответ открыт, ответ должен закрыться.

Я пробовал следующее: 

jQuery(".faq > h1").click(function () { 
jQuery(this).siblings().hide();
jQuery(this).closest(".question").children("p").toggle("slow");

});

});

Почти добивается цели, но при щелчке открытого в данный момент вопроса он закрывается и снова открывается, что выглядит очень ошибочно.

Как я могу это исправить?

Ответы [ 2 ]

1 голос
/ 23 января 2012 
jQuery(".faq > h1").on('click',
function() {
    var $sib = jQuery(' + .answer', this);
    jQuery('.answer:visible').not($sib).hide('fast');
    if($sib.is(':visible')) $sib.hide('slow'); else $sib.show('slow');
});

ДЕМО

0 голосов
/ 23 января 2012

Попробуйте это (скрыть все элементы класса «answer» и затем показать только один выбранный в данный момент) 

jQuery(".faq > h1").click(function () { 
    jQuery('.answer').hide();
    jQuery(this).next('.answer').show("slow");
});
...