僅在一個菜單中禁用數據自動關閉下拉式基礎

Question

我有一個問題。

如何禁用自動關閉只是有一類STAY-ACTIVE

Codepen example

在上面的Codepen例如下拉菜單中，我希望「IniciarSessão」菜單項保持活躍移動我的鼠標了。

---

這是我的代碼：

<ul class="dropdown menu" data-dropdown-menu > 
    <li> 
     <a href="#" class="button">MENU 1</a> 
    </li> 
    <li> 
     <a href="#" class="button">MENU 2</a> 
     <ul class="menu"> 
      <li><a href="#"> ITEM 1</a></li> 
      <li><a href="#"> ITEM 2 </a></li> 
      <li><a href="#"> ITEM 3 </a></li> 
     </ul> 
    </li> 

    <li class="STAY-ACTIVE"> 
     <a href="#" class="button">MENU 3</a> 
     <ul class="menu"> 
      <li><a href="#"> ITEM 1</a></li> 
      <li><a href="#"> ITEM 2 </a></li> 

     </ul> 
    </li>  

    <li> 
     <a href="#" class="button ">MENU 4</a> 
     <ul class="menu"> 
      <li><a href="#"> ITEM 1</a></li> 
      <li><a href="#"> ITEM 2 </a></li> 
      <li><a href="#"> ITEM 3 </a></li> 
      <li><a href="#"> ITEM 4 </a></li> 

     </ul> 
    </li>  

</ul> 

如果我使用data-autoclose:false選項所有li的受到影響。

我想要li的一類STAY-ACTIVE要關閉，當一個點擊發生在它之外，其他人在失去焦點後關閉/鼠標移開。

我使用基金會6

如果您有任何疑問，我會盡力解決這些問題。

感謝

Answer 1

一種可能的方式做你想要將根據該菜單項來改變closingTime值是什麼活躍。在頁面上初始化Foundation插件時，您可以定位各個元素，而不是頁面上的所有元素。

您可以使用此選項來初始化下拉菜單中，也有對它的引用，允許某些默認的操控方便（如closingTime）

請參閱下面的解釋在JavaScript/jQuery的意見我在做什麼。

//Specify a default closing time, so it can be reset as and when required. 
var defaultClosingTime = 500; 
var options = { 
    "closingTime": defaultClosingTime 
}; 

//Initialize the dropdown menu with a closingTime of 500. 
var elem = new Foundation.DropdownMenu($('#dropdown'), options); 

//On a mouseover, check if the active item has a class of "STAY-ACTIVE". If it does, update 
//the DropdownMenu element's closingTime to a really large value, so that it remains open. 
$('.is-dropdown-submenu-parent').on('mouseover', function() { 
    if ($(this).hasClass('STAY-ACTIVE')) { 
    //You can increase this value if you want to give your users more time. 
    elem.options.closingTime = 6000000; 
    } else { 
    if (element.options.closingTime !== defaultClosingTime) { 
     //If you hover over one of the other menu items, reset the closingTime to the default. 
     elem.options.closingTime = defaultClosingTime 
    } 
    } 
}); 

$(document).foundation(); 

Updated Codepen

Answer 2

您可以使用此：

$(".dropdown li").mouseover(function(){ 
    $(this).next("ul").show(); 
}).mouseleave(function(){ 
    $(this).next("ul").hide(); 
    $(this).next("ul.STAY-ACTIVE").show(); 
}); 
$(".STAY-ACTIVE").click(function(e){ 
    e.preventDefault(); 
}); 
$("body").click(function(){ 
    $(".STAY-ACTIVE").hide() 
}); 

希望這有助於:)