0

ユーザーがクラス要素をクリックしたときに、JQuery を使用して表示および非表示にするのに問題があります。

私のHTMLコードは次のとおりです。

<div class="faqSectionFirst">
Question?

<p class="faqTextFirst" style='text-align:justify'>
<span>
Some text.
</span>
</p>
</div>

私のJSコードは次のとおりです。

$('.faqSectionFirst').on("click", function(){

if( $('.faqSectionFirst').index(this) ) {
    $('p.faqTextFirst').show();
} else {
    $('p.faqTextFirst').hide();
}
}
);

誰でも私を助けることができますか？これは機能していません。20 の質問と 20 の回答があり、すべての人に役立つようにしたいと考えています。

4

5 に答える 5

2

最良の使用方法<dd><dt>

HTML

<dl >
    <dt>Question 1?</dt>
    <dd>Answer of Question 1.</dd>
    <dt>Question 2?</dt>
    <dd>Answer of Question 2.</dd> 
</dl>

CSS

dd { display:none; }
dt { padding:4px; font:bold 13px verdana;cursor:pointer;}

jQuery

$(document).on('click','dt', function() {
    var myDD = $(this).next('dd');
    $('dd').slideUp();
    myDD.slideToggle();
});

Working Example

于 2013-10-03T21:20:51.143 に答える
0

JQuery accordian問題を正しく理解していれば、 を使用できます。ヘッダーは質問を表し、展開可能なパネルは答えを表すことができます。

于 2013-10-03T21:00:10.240 に答える
0

これは最短のアプローチではないかもしれませんが、私の経験では、常に最も堅牢な方法です。jQuery のhide()とshow()は基本的にプロパティdisplay: noneとdisplay: block(それぞれ) をチェーン先の要素に割り当てているからです。toggle()は両方を組み合わせたようなものですが、まだ のみをサポートしていdisplay: blockます。たとえば、 orの代わりにdisplay: inlineorを使用したい場合、望ましくない結果が生じる可能性があります。display: inline-blockdisplay: block

したがって、私のアドバイスは次のとおりです。ではなく、常にクラスを使用して制御しCSSJavaScriptます。これにより、スタイルを完全に制御できます。次の例はうまく機能します。

HTML

<a class="click-trigger" href="#"></a>
<div class="element"></div>

JavaScript

var c = $('.click-trigger');
var e = $('.element');
c.click(function() {
    if (e.hasClass('hidden')) {
        e.removeClass('hidden').addClass('show');
    } else {
        e.removeClass('shown').addClass('hidden');
    }
});

CSS

.click-trigger,
.element { height: 20px; width: 20px; }
.click-trigger { background-color: red; display: block; }
.element { background-color: blue; }

.hidden { display: none; }
.shown { display: block; }

/*
display alternatives not supported by jQuery's 'show()' nor 'toggle()':

display: inline;
display: inline-block;
display: list-item;
display: flex;
display: inline-flex;
display: table;
display: inline-table;
display: table-row-group;
display: table-column;
display: table-column-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-caption;
*/

この例では、簡略化のためにマークアップが取り除かれています。ワーキングフィドル。

于 2013-10-03T22:20:23.640 に答える