加載隱藏元素，出現在鼠標中的懸停點

我有一個隱藏/顯示子元素的菜單，其中mouseenter & mouseleave，但子元素在頁面加載時顯示。加載隱藏元素，出現在鼠標中的懸停點

我喜歡它，所以頁面加載時不會出現元素，但只在mouseenter & mouseleave。

我如何用下面的代碼完成此操作？

 $('.side-nav>li.has-flyout', this).on('mouseenter mouseleave', function(e) { 
      if (e.type == 'mouseenter') { 
       $('.side-nav').find('.flyout').hide(); 
       $(this).children('.flyout').show(); 
      } 
      if (e.type == 'mouseleave') { 
       var flyout = $(this).children('.flyout'), 
        inputs = flyout.find('input'), 
        hasFocus = function(inputs) { 
         var focus; 
         if (inputs.length > 0) { 
          inputs.each(function() { 
           if ($(this).is(":focus")) { 
            focus = true; 
           } 
          }); 
          return focus; 
         } 
         return false; 
        }; 
       if (!hasFocus(inputs)) { 
        $(this).children('.flyout').hide(); 
       } 
      } 
     });

只做$('.side-nav>li.has-flyout').hide();顯然隱藏了整個導航項。 FWIW我正在使用Foundation 5的框架。

來源

2015-06-04 timmyg

'$（ '邊導航> li.has-彈出。'）隱藏（）;'不起作用，因爲這些都不是你的元素躲藏或放映時，但他們的孩子與班'飛出'。爲什麼不''（'。side-nav> li.has-flyout'）。children（'。flyout'）。hide（）;'？ – azium

就是這樣！雖然，內容立即出現，然後消失，當頁面加載（而不是完全隱藏）。不理想，但肯定可以服用 – timmyg

只需在CSS中做到這一點。看到我的回答 – azium

理想情況：所有你最初的樣式（如display: none）.hide()應該寫在你的樣式表中。

/* css */ 
.side-nav > li.has-flyout .flyout { 
    display: none; 
}

不太理想的：

// JavaScript 
$('.side-nav>li.has-flyout').children('.flyout').hide();

來源

2015-06-04 19:51:59 azium

通過CSS，如果你的子元素列表中有類如.sub-menu

然後只需添加CSS

.sub-menu { display: none; }

來源

2015-06-04 19:52:26

加載隱藏元素，出現在鼠標中的懸停點

回答

相關問題