0

我有一个简单的常见问题解答页面，其中每个项目都有以下 HTML 语法

   <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 回答