データオートクローズドロップダウン機能を1つのメニューにまとめました

Question

質問があります。

がどのように私は上記のCodepen例でSTAY-ACTIVE

Codepen example

のクラスを持つドロップダウンのためのオートクローズ無効にするには、私は「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のすべてが影響を受けます。

STAY-ACTIVEのクラスのliは、その外側にクリックが発生したときに閉じ、フォーカスを失った後に閉じる/マウスを離した場合に閉じるようにします。

私はあなたが疑問を持っている場合、私はそれらに対処しようとするでしょう財団6

を使用しています。

おかげ

Answer 1

可能な方法の1つをアクティブです。ページ上のFoundationプラグインを初期化すると、ページ上のすべてではなく個々の要素を対象にすることができます。

あなたがドロップダウンメニューを初期化する場合は、このオプションを使用しても、説明のために以下のJavaScript/jQueryの内のコメントを参照してくださいしてください

（closingTimeのような）特定のデフォルトの容易な操作を可能にすること、それへの参照を持つことができます

私がやっていることの

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

希望はこのことができます:)あなたはどのメニュー項目に応じclosingTime値を変更することですやりたい