Question

我有一个问题。

如何仅针对类STAY-ACTIVE

的下拉列表禁用autoclose

在上面的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的{{1}}类在其外部发生咔嗒声时关闭，而其他人在失去焦点后将其关闭/鼠标移开。

我正在使用Foundation 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()
});

希望这有助于：）

在一个菜单中禁用data-autoclose下拉基础

2 个答案: