0

我终于得到了这个下拉菜单来动画并按照我想要的方式运行，但是我有一个小错误使得它在下拉触发器的初始鼠标离开时不会导致下拉菜单向上滑动但是相反，它只是冻结在原地。除此之外，我是一个相当新的程序员，所以如果有人有一些关于如何让这个运行更干净或让我的代码更高效的提示，我总是喜欢对我的代码进行专业的批评。谢谢。

     /** Mega DropDown **/
/* Determine if the user is hovering over the trigger for more than .5sec and if there is already a drop-down menu showing. 
If there is then modify the containing elements height to match the new contained elements and if not then set the 
containing element to the correct height */
$(".cataDropDown").mouseenter(function () {
    $this = $(this); //use currently selected ".cataDropdown"

    var EleHt = ($this.children('ul').height()) + 29; //Get height of contained elements for slide event
    var count = 0;
    var onHoverTimer = setInterval(function () {
        count += 1; //setInterval for hover timer

        //If User hovers over trigger for more than .5 seconds - 
        if (count >= 1) {
            clearInterval(onHoverTimer); //Clear counter
            onHoverTimer = setInterval(300);

            $(".cataDropDown").children('ul').animate({ opacity: '0' }, 200).hide(); //Give contained elements dimension but keep hidden with opacity property
            $this.children('ul').show().css('opacity', '0'); //Give contained elements dimension but keep hidden with opacity property
            $this.parents('div#menuContainer').stop(true, false).animate({ height: EleHt }, 400); //Open container to height of contained elements
            $this.children('ul').stop(true, true).animate({ opacity: '1' }, 200); //show child elements (menu)
            $this.addClass('menu-active') //add class "menu-active" to test if the drop-down is currently open
        }
    }, 300);

    $(".cataDropDown").mouseleave(function () {
        clearInterval(onHoverTimer); //Clear counter to prevent opening the menu by accident
        onHoverTimer = setInterval(300);

        if (!$this.hasClass('menu-active')) {
            $(".cataDropDown").removeClass('menu-active');
            $this.parents('div#menuContainer').animate({ height: '27px' }, 400);
            $('.cataDropDown > ul').stop().animate({ opacity: '0' }, 200, function () {
                $(this).hide();
            });
        } else {
            $this.parents('div#menuContainer').stop(true, false).animate({ height: EleHt }, 200);
            $this.removeClass('menu-active');
            //window.console && console.log(EleHt);
        }
    });
});

编辑：根据要求的 JSFiddle - http://jsfiddle.net/hUtAp/8/

4

1 回答 1

2

处理程序中的代码mouseleave()是罪魁祸首。试试这个简化版本：

 $(".cataDropDown").mouseleave(function () {

     clearInterval(onHoverTimer); //Clear counter to prevent opening the menu by accident
     onHoverTimer = setInterval(300);

     $(".cataDropDown").removeClass('menu-active');
     $this.parents('div#menuContainer').stop().animate({
         height: '27px'
     }, 500);
     $('.cataDropDown > ul').stop().animate({
         opacity: '0'
     }, 200, function () {
         $(this).hide();
     });
 });
于 2013-08-27T18:53:28.113 回答