javascript - クリックすると最初のFAQ要素のみが展開されます - jquery

Question

FAQリストを作成しようとしています。回答は最初のクリックで問題なく表示されますが、別の質問をクリックしてその回答を展開し、他の質問を閉じることができるようにしたいと考えています。これがJavaScriptです：

$(document).ready(function() {
// hide all the answers
$('.faq li div').hide();
$('.faq li').click(function(){
var question = $(this);
var answer = $(this).find('div');
// if the faq isn't active
if(!$('.faq li').hasClass('active')) {
      answer.slideDown();
      $(this).siblings('div').slideUp();
      question.addClass('active');
}
else { 
     answer.slideUp();
     question.removeClass('active');
}

 });



});

CSS:

ul.faq {
list-style:none;
cursor:pointer;
z-index:1;

}

ul.faq li h3 {
background:#0A5C75 url(../images/faq-inactive.png) right no-repeat;
color:#fff;
padding:20px 50px 20px 10px;
margin-bottom:10px;
border:1px solid #fff;
}
ul.faq li.active h3 {
background:#0A5C75 url(../images/faq-active.png) right no-repeat;

}
ul.faq li div {
background:#FFFFFF;
margin:0px 10px 10px 10px;
padding:20px;
overflow:hidden;
/* added fixed width to stop the jerkyness*/
width:522px;
position:relative;
top:-10px;
box-shadow: inset 0px 4px 4px 0px rgba(63, 70, 76, 0.15), 0px 4px 4px rgba(63, 70, 76, 0.15);
}

そしてHTML

<ul class="faq">
        <li>
            <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut arcu magna, sodales vel dignissim pharetra, adipiscing sed orci?</a></h3>
            <div>Vivamus rutrum arcu sit amet dolor pulvinar dictum. Etiam porttitor leo eget velit volutpat quis ultricies urna ornare. Quisque ac ultrices est. Ut lobortis malesuada justo, sed blandit sapien bibendum et. Donec vel ante eu orci pellentesque dictum. Phasellus molestie egestas du</div>
        </li>
        <li>
             <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut arcu magna, sodales vel dignissim pharetra, adipiscing sed orci?</a></h3>
             <div>This is the answer to question 2</div></li>
         <li>
             <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut arcu magna, sodales vel dignissim pharetra, adipiscing sed orci?</a></h3>
             <div>This is the answer to question 3</div>
         </li>
</ul>

Answer 1

あなたのコードを少し改善して動作を生成し、コードをかなり短縮できると思います。

注意してください、私はそれがどのように達成できるかを示すためにあなたのアクティブなクラスの使用をスキップしました.

これは、FF13 と Chrome でテストしたデモ用の tinker.io です。

$('.faq li div').hide();
$('.faq li').click(function(event) {

    var clickedQuestion = event.target;
    var answer = $(clickedQuestion).siblings('div');

    if($('ul.faq').find('div').is(':visible')){
        $('ul.faq').find('div').slideUp();      
    }
    answer.slideDown();

 });

Answer 2

実際のデモ http://jsfiddle.net/e3Bec/ または http://jsfiddle.net/XGJXM/

あなたのコードは問題ありません。if (!$(this).hasClass('active')) { 代わりに==>を使用するだけです if(!$('.faq li').hasClass('active')) { :) また、最初の条件チェックではこれは必要ありませんquestion.addClass('active');

残りのコードが役立つはずです、:)

コード

$(document).ready(function() {
    // hide all the answers
    $('.faq li div').hide();
    $('.faq li').click(function() {
        $('div').slideUp();
        var question = $(this);
        var answer = $(this).find('div');
        // if the faq isn't active
        if (!$(this).hasClass('active')) {
            answer.slideDown();
            $(this).siblings('div').slideUp();
            //question.addClass('active');

        }
        else {        
            answer.slideUp();
            question.removeClass('active');
        }

    });



});​

Answer 3

要素が既に表示されている場合、要素を上にスライドさせないことが気に入っています。

.hide を css "display:none" に移動するかもしれません。DOM がロードされて非表示になるのを待つ必要はありません。

$(document).ready(function() {
  $('.faq li').click(function(event){
    $(this).find('div').not(":visible").slideDown();
    $('.faq li div:visible').not($(this).find('div')).slideUp();
  });
});

Answer 4

アコーディオンを使ってみませんか。http://jqueryui.com/demos/accordion/