Search code examples
javascriptjqueryonclickmouseentermouseleave

why does the hover and click not always work?


here is my fiddle

Pretty much working perfectly apart from sometimes mouseenter, mouseleave, click function (.item) doesn't always work - and needs to be clicked for it to start working again? why is this - here is my code -

       $(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);          

        }
    }  

     } 
                 });


     });

I'm not sure if its something to do with this?

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

      }  

Solution

  • Try replacing

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

    with this

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