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

Question

我有一个问题。

如何仅对具有 STAY-ACTIVE 类的下拉列表禁用自动关闭

Codepen example

在上面的 Codepen 示例中，我希望“Iniciar Sessã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 都会受到影响。

我希望具有 STAY-ACTIVE 类的 li 在其外部发生点击时关闭，而其他类在失去焦点/鼠标移动后关闭离开。

我正在使用 Foundation 6

如果您有任何疑问，我会尽力解决。

谢谢

Answer 1

实现您想要的操作的一种可能方法是根据处于事件状态的菜单项更改 openingTime 值。当您在页面上初始化 Foundation 插件时，您可以定位单个元素，而不是页面上的所有内容。

您可以使用此选项来初始化下拉菜单并引用它，从而可以轻松操纵某些默认值(例如 openingTime )

请参阅下面 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