仅在一个菜单中禁用数据自动关闭下拉式基础

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() 
}); 

希望这有助于:)