0

jQueryを使用してFAQページを作成しようとしています。これは私が使用しているjsです：

$("#faq li").click(function (event) {
    event.preventDefault(); 
    $(this).next("#faq li ul").slideToggle("fast");
});

なぜ機能しないのかわからないので、助けていただければ幸いです。

HTMLは次のとおりです。

<ul id="faq">

<li>Where are you located?
<ul>
We are located in Southern Cali!
</ul>
</li>

<li>What are your service times?
<ul>
Our service times are 7:00, 8:00, and 9:00!
</ul>
</li>

</ul>
4

2 に答える 2

1

a<li>は常に a の子である必要があり、 a<ul>に<ul>は他に何も含めることができません。後者の点は、マークアップが無効であることを意味します。

<dl>代わりに (定義リスト) を使用<dt>してから、項目のタイトルと<dd>項目のテキストに使用する必要があります。これは、まさにこのユース ケースを意図したリストのようなものです。

<dl id="faq">
<dt>Where are you located?</dt>
<dd>We are located in Southern Cali!</dd>
<dt>What are your service times?</dt>
<dd>Our service times are 7:00, 8:00, and 9:00!</dd>
</dl>

次のようなコードで (イベント委任を使用)

$("#faq dt").click(function() {
   $(this).next('dd').slideToggle('fast');
});
于 2012-08-27T22:10:43.690 に答える
0

ulクリックで展開したいのはli、兄弟ではなく の子であることに注意してください。したがって、.children('ul')代わりに を使用する必要があり.next('#faq ul li')ます。

これを試して：

$("#faq li").click(function (event) {
    event.preventDefault(); 
    $(this).children("ul").slideToggle("fast");
});

また、テキストを の中に入れるのは良い習慣ではありませんul。ul内部をdivまたは他の要素に置き換えることを検討してください。

于 2012-08-27T22:31:02.083 に答える