昨天速成了个淡入淡出下拉菜单的JS代码,但是在使用的时候发现有时鼠标移开不消失,其实原因很简单,就是当用户鼠标停留在下拉箭头的时候,菜单显示了出来,但是菜单消失的条件是用户离开菜单,如果用户不老实,不将鼠标移入菜单,那么菜单就消失不了了,解决的方法,我是这样弄的,就是设置一个定时器,当鼠标离开下拉箭头时,设置一个定时器,看用户有没有讲鼠标移入菜单,如果1秒后没有移入菜单,那么就隐藏菜单~

var navShow = false;
  $(document).ready(function(){
    $(".d-user-hover-con a").click(function(){
      $(this).parent(".d-user-hover-con").fadeOut('500');
    });
    $('.d-user').mouseover(function(){
      $('.d-user-hover-con').fadeIn('500');
    });
    $(".mItem").mouseover(function(){
        $(".mItem-ul").fadeIn('500');
      });
    $(".sel").mouseover(function(){
      $(".sel-ul").fadeIn('500');
    });
    $('.selectType').click(function(){
      $('.sel-ul').fadeOut('500');
    })
    //select js codes
    $('.selectType').click(function(){
      var types = $(this).attr('href');
      if(types == 1){
        $('#selectType').html('心得');
      }else if(types == 2){
        $('#selectType').html('好友');
      }else{
        $('#selectType').html('宝贝');
      }
      return false;
    })
    //submit js codes
    $('#sub').click(function(){
      //get vals!
      var types = $('#selectType').html();
      var names = $('#search_names').val();
      //url
      var targets = '{$smarty.const.STATIC_URL}/search/';
      if(names != ''){
        targets = targets+'?name='+names;
      }
      if(types == '心得'){
        targets = targets+'mio_amp;type=1';
      }else if(types == '好友'){
        targets = targets+'mio_amp;type=2';
      }
      window.location.href=targets;
      return false;
    })
    //fix fadeout bug
    $('.mItem-ul,.d-user-hover-con,.sel-ul').mouseleave(function(){
      $(this).fadeOut('500');
      navShow = false;
    })
    $('.mItem-ul,.d-user-hover-con,.sel-ul').mouseover(function(){
      $(this).fadeIn('500');
      navShow = true;
    })
    $('.mItem,.sel,.d-user-hoverc').mouseleave(function(){
      setTimeout(function(){
        if(navShow == false){
          $('.mItem-ul,.d-user-hover-con,.sel-ul').fadeOut('500');
        }
      },'500');
    })
  });

上一篇:[mmd]bo beep 下一篇:快递查询API