为什么hover和点击并不总是有效？

这是我的小提琴

几乎完全不同于mouseenter，mouseleave，click function（.item）的工作并不总是有效 – 需要点击才能重新开始工作吗？ 这是为什么 – 这是我的代码 –

$(document).ready(function () { $('.timelineTile').click(function (evt) { evt.stopPropagation(); $('.timelineTile').not(this).removeClass('clicked').find('.pull_down_content').height(0); $(this).toggleClass('clicked'); if(!$('.timelineTile').hasClass("clicked")){ $(this).children('.pull_down_content').height(0); } }); }); $(document).click(function () { $('.timelineTile').removeClass('clicked'); $('.pull_down_content').height(0); $('.inner').stop().css({'display': 'none'}, 300); }); $(document).ready(function () { $('.timelineTile').children('.item').on('mouseenter mouseleave click', function(e) { e.stopPropagation(); if ($(this).parent('.timelineTile').hasClass("clicked")) { if (!$(this).data('clicked')) { var Height = e.type==='mouseenter' ? '90px' : e.type==='click' ? '250px' : '0px'; $(this).siblings('.pull_down_content').stop().animate({'height': Height}, 300); $(this).siblings('.pull_down_content').children('.inner').css({'display': 'block'}, 300); if (e.type==='click') $(this).data('clicked', true); }else{ if (e.type==='click') { $(this).data('clicked', false); $(this).siblings('.pull_down_content').stop().animate({'height': '0px'}, 300); $(this).siblings('.pull_down_content').children('.inner').css({'display': 'none'}, 300); } } } }); }); 

我不确定它是否与此有关？

  if(!$('.timelineTile').hasClass("clicked")){ $(this).children('.pull_down_content').height(0); } 

Answer 1

尝试更换

 $('.timelineTile').not(this).removeClass('clicked').find('.pull_down_content').‌​height(0); 

有了这个

 $('.timelineTile').not(this).removeClass('clicked').find('.pull_down_content').‌​height(0).end().find('.item').data('clicked',false); 

Answer 2

也许您尝试在元素不存在时附加事件（例如，如果它们将由脚本动态添加）。

使用更现代的案例’on’而不是’click’等。

 $(wrapper).on('click', 'element', function() { ... }); 

Smth喜欢：

 ... 
 Click me 
 ... $('.wrapper').on('click', '.link', function() { ... }); 

即使动态添加，此变体也会为所有元素添加事件。