Question

我有一个简单的常见问题页面，其中每个项目都有以下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();
       }
   });

当我点击我的项目标题时，下面的文字会立即消失。当我单击标题时，该项目将不会按预期显示。我的控制台没有显示错误。

我做错了什么？

Answer 1

您每次都会获得相同的操作，因为它从来没有“隐藏”类。最简单的方法是：

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

希望它适合你

触发一次后jQuery项不会触发

1 个答案: