Javascript jQuery-取消绑定并再次绑定

嗨，我试着在鼠标上显示div（蓝色的一个），但只有在那个时候，ul隐藏了类

我已经完成了，但是我不知道如何才能再次绑定在鼠标上显示蓝色div的函数。。 要测试它，请将鼠标悬停在白色li上，然后单击紫色按钮并再次尝试将鼠标悬停在白色li上-在最后一步中，应显示蓝色li，但我不会：(

这是我的小提琴

$（文档）.ready（函数（e）{
$（'li'）。每个（函数（）{
var elem_number=$（this.index（）；
$（this）.html（元素编号+1）；
});
$（'.left panel toggle'）。打开（'单击'，函数（）{
if（$（'ul'）.hasClass（'hidden'））{
$（'ul'）.animate（{width:'150px'}，200）.addClass（'visible'）.removeClass（'hidden'）；
$（'li'）.animate（{高度：'100px'，宽度：'150px'}，200）；
$（'li'）。解除绑定（“鼠标”）；
}否则{
$（'ul'）.animate（{width:'35px'}，200）.addClass（'hidden'）.removeClass（'visible'）；
$（'li'）.animate（{高度：'30px'，宽度：'30px'}，200）；
}
});
$（“li”）.bind（'mouseenter'，函数（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=工具提示位置。顶部+工具提示高度
如果（li_position.top工具提示\u height/2）{
$（'.tooltip'）.css（{'top'：li_position.top-tooltip_height/2，'left'：li_position.left+li_width+15}）；
}
if（（视图高度-li_位置.top）<工具提示高度/2）{
$（'.tooltip'）.css（{'top'：li_position.top-（（li_position.top+tooltip_height）-视图高度），'left'：li_position.left+li_width+15}）；
}
}
//$（'img.x'）.attr（'src'，$（this.img.val（'src'））；
e、 预防默认值（）；
});
$（“ul”）.bind（'mouseleave'，function（）{
$（'.tooltip'）.animate（{'left'：'56px'，'opacity'：'0'，60）；
});  
});

像这样吗？是：）但是当ul有类可见蓝色div时不应该显示。我不明白。。。你把条件：如果ul有类可见，不显示蓝色div。。。然后你添加了ul可见的类，你想知道为什么蓝色div不再可见了？！我现在考虑另一个测试用例：第一次显示blue div。。然后展开ul，悬停时不显示蓝色div。。。然后再次缩小ul并再次显示蓝色div。。。这就是你想要的？工作得很有魅力-非常感谢：）

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