jquery .hover（）與else if語句

我想在下拉菜單中爲一組子項目放置onmouseout事件的一些延遲。但我不想使用css轉換。我用.hover（）和setTimeout方法設置它，但我只想把它放在菜單中的特定元素 - 在這種情況下僅用於子項目，所以我使用if else else語句。我不知道爲什麼這個if else聲明不起作用。jquery .hover（）與else if語句

這裏是我的javascript代碼：

var selectors = 
    { 
     element: '.main-menu li:has(ul)' 
    } 

var opacityWorkaround = function ($element, value) { 

     $element.css('opacity', value); 
}; 

var getAnimationValues = function (visible) { 
    var result = { 
     visibility: visible 
    }; 
     result.opacity = visible === 'visible' ? 1 : 0; 
}; 

var mouseActionHandler = function ($element, visible, opacityValue) { 
    $element 
     .stop() 
     .css("visibility", 'visible') 
     .animate(getAnimationValues(visible), 
     3000, 
     function() { 
       $(this).css("visibility", visible); 
       opacityWorkaround($(this), opacityValue); 
       }); 
}; 

var onMouseIn = function() { 
    var $submenu = $(this).children("ul:first"); 
    if ($submenu) { 
     mouseActionHandler($submenu, 'visible', 1); 
    } 
}; 

var onMouseOut = function() { 

    var $submenu = $(this).children("ul:first"); 
    var $global = $('.global').children('ul'); 

    if ($submenu) { 

       mouseActionHandler($submenu, 'hidden', 0); 

    } else if ($global) { 
     setTimeout(function() { 
      mouseActionHandler($global, 'hidden', 0); 
     },1500); 
    } 
}; 

$(selectors.element).hover(onMouseIn, onMouseOut);

我把1500毫秒的延遲和$全局變量是指在菜單子項，我想使disapear與延遲。我想在用戶將鼠標光標移出「某些項目>」選項卡時實現此目的。

這是我的小提琴示例。 http://jsfiddle.net/PNz9F/1/

在此先感謝您的幫助！

來源

2013-12-15 kris

我想我更接近得到解決方案，以便我在這裏再舉一個例子 http://jsfiddle.net/8beT8/13/ – kris

這是你要找的嗎？ http://jsfiddle.net/PNz9F/6/ – Trevor

是Trevor，這是我正在尋找的東西，你節省了幾個小時的挖掘。非常感謝！我必須審查條件statc的基礎.. – kris

在您的問題$submenu中的示例中始終有一個值，因此else if語句永遠不會運行。您可以改爲查看課程。

 var timeout; 
     var $submenu = $(this).children("ul:first"); 
     var $global = $('.global').children('ul'); 

     if ($(this).hasClass('menu-item')) { 

        mouseActionHandler($submenu, 'hidden', 0); 
        mouseActionHandler($global, 'hidden', 0); 
        clearTimeout(timeout); 

     } else if ($(this).hasClass('global')) { 
      timeout = setTimeout(function() { 
       mouseActionHandler($global, 'hidden', 0); 
      },1500); 
     }

來源

2013-12-15 21:24:59 Trevor

你應該能夠只使用:hover選擇在你的代碼來檢查用戶是否懸停在元素與否，並相應地運行代碼

來源

2013-12-15 21:28:12 xorinzor

是的，我使用：懸停選擇器爲所有其他瀏覽器，並使延遲我使用過渡延遲屬性，但這不適用於比版本10以前的IE – kris

不，但我的意思是在您的JQuery選擇器中，您可以使用任何CSS選擇器包括：懸停以查看用戶是否懸停在元素上，然後使用if（$（「＃something：hover」）。length> 0）{// something} else {// something else} – xorinzor

and你也可以使用$（「＃something」）。stop（true，true）.hover（function（）{// do something}，function（）{// do something else}）; – xorinzor

jquery .hover（）與else if語句

回答

相關問題