0

各項目に次の HTML 構文がある簡単な FAQ ページがあります。

   <article>
       <h3><a href="#"><i class="icon-down"></i> Item Title</a></h3>
       <p class="entry">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </article>

私のJqueryは次のとおりです。

   $('#faq h3').click(function(e){
       e.preventDefault();
       if ( !$(this).hasClass('hidden') ) {
           $(this).addClass('shown');
           $(this).next('.entry').slideDown();
       } else {
           $(this).removeClass('shown');
           $(this).next('.entry').show();
       }
   });

アイテムの見出しをクリックすると、下のテキストがすぐに消えます。見出しをもう一度クリックすると、アイテムが期待どおりに表示されません。コンソールにエラーは表示されません。

私は何を間違っていますか？

4

1 に答える 1

1

クラスが「非表示」になることはないため、毎回同じアクションを取得しています。これを行う最も簡単な方法は次のとおりです。

$('#faq h3').on('click',function(e){
   e.preventDefault();
   $(this).next('.entry').slideToggle();
});

それがあなたのために働くことを願っています

于 2012-06-16T19:41:46.890 に答える