Question

嗨我试图在mouseenter上显示div（蓝色）但只有当ul隐藏了类时。

我已经完成了但是我怎么不知道我怎么能再绑定功能，这将显示mouseenter上的蓝色div .. 为了测试它悬停在白色的li上，然后点击紫色按钮并尝试再次悬停白色li - 在最后一步应该显示蓝色li但是ii不会:(

这是我的小提琴

$(document).ready(function(e){


$('li').each( function() { 
    var elem_number = $(this).index();
         $(this).html(elem_number + 1);
});

$('.left-panel-toggle').on('click', function () {    
    if($('ul').hasClass('hidden')) {
      $('ul').animate({width:'150px'}, 200).addClass('visible').removeClass('hidden');
        $('li').animate({height:'100px',width:'150px'}, 200); 
  $('li').unbind("mouseenter");

} else {
  $('ul').animate({width:'35px'}, 200).addClass('hidden').removeClass('visible');
    $('li').animate({height:'30px', width:'30px'}, 200);
    }
});


$( "li" ).bind('mouseenter',function(e) {
      if($('ul').attr('class') == 'hidden') {
          $('.tooltip').show().animate({'left':'36px','opacity':'1'},100);
                var tooltip_height = $('.tooltip').height();
                var tooltip_width = $('.tooltip').width();
                var  viewHeightY = $(window).height(); 

            var li_position = $(this).position();
            var li_height = $(this).height();
            var li_width = $(this).width();

            var tooltip_position = $('.tooltip').position();
            var tt = tooltip_position.top + tooltip_height

if(li_position.top < tooltip_height/2) {
      $('.tooltip').css({'top':li_position.top - li_position.top,                 'left':li_position.left + li_width + 15});            
}
if(li_position.top > tooltip_height/2) {
      $('.tooltip').css({'top':li_position.top - tooltip_height/2, 'left':li_position.left + li_width + 15});            
}
if((viewHeightY - li_position.top) < tooltip_height/2) {
     $('.tooltip').css({'top':li_position.top -((li_position.top +  tooltip_height)-viewHeightY), 'left':li_position.left + li_width + 15});            
    }
}
//    $('img.x').attr('src', $(this.img).val('src'));
e.preventDefault(); 
});

$( "ul" ).bind('mouseleave', function() {            
            $('.tooltip').animate({'left':'56px','opacity':'0'},60);
    });  
});

jQuery - 再绑定和绑定

0 个答案: