Saya sedang mengerjakan contoh kode teks yang dapat dilipat ini.

tautan jsfiddle

HTML:

<div class="container faq_wrapper">
    <div class="row">
        <div class="span10 offset1">
            <p>
                &nbsp;</p>
            <div class="faq-all-actions">
                <a class="faq-expand">Expand All</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a class="faq-collapse">Collapse All</a></div>
        </div>
    </div>
    <div class="row">
        <div class="span10 offset1">
            <div class="question-wrapper">
                <div class="arrows">
                    &nbsp;</div>
                <div class="big-q">
                    Q</div>
                <div class="question">
                    <div class="arrow" ></div><h6><font size="6">Can I try the software before I buy it?</font></h6></div>
                <div class="answer-wrapper">
                    <div class="big-a">
                        A</div>
                    <div class="answer">
                        Yes! Simply <a href="/trial">download a free trial</a> and you&#39;ll have instant access to all features for 30 days, absolutely free. We don&#39;t require your credit card details or any commitment.</div>
                </div>
            </div>    
        </div>
    </div>

    <div class="row">
        <div class="span10 offset1">
            <div class="question-wrapper">
                <div class="arrows">
                    &nbsp;</div>
                <div class="big-q">
                    Q</div>
                <div class="question">
                    <div class="arrow" ></div><h6><font size="6">Can I try the software before I buy it?</font></h6></div>
                <div class="answer-wrapper">
                    <div class="big-a">
                        A</div>
                    <div class="answer">
                        Yes! Simply <a href="/trial">download a free trial</a> and you&#39;ll have instant access to all features for 30 days, absolutely free. We don&#39;t require your credit card details or any commitment.</div>
                </div>
            </div>    
        </div>
    </div>

</div>

JavaScript:

$(document)
    .on('click','.row .question-wrapper',function(){ 
        $(this).find('.answer-wrapper').slideToggle();
        $('.arrow').toggleClass('down');
    })

    .on('click','.faq-expand',function(){
        $('.answer-wrapper').slideDown();
        $('.arrow').addClass('down');
    })

    .on('click','.faq-collapse',function(){
        $('.answer-wrapper').slideUp();
        $('.arrow').removeClass('down');
    })

Ada masalah dengan kode ketika saya memperluas baris pertama. Ketika saya mengklik animasi panah satu baris diaktifkan juga di semua baris. Bagaimana saya bisa mencegah hal ini?

0
Peter Penzov 30 Mei 2015, 17:16
Gunakan $(this).find('.answer-wrapper') yang sama di blok kedua dan ketiga seperti yang Anda gunakan di blok pertama.
 – 
David Thomas
30 Mei 2015, 17:21

1 menjawab

Jawaban Terbaik

Karena Anda menggunakan ini:

$('.arrow').toggleClass('down');

Ini akan mengaktifkan kelas untuk semua elemen dengan kelas panah

Anda ingin membatasinya pada pertanyaan yang diklik

$(this).find(".arrow").toggleClass('down');
//or
$(".arrow",this).toggleClass('down');

Biola yang Diperbarui

1
Patrick Evans 30 Mei 2015, 17:25