0

Slicknav を使用しています: http://slicknav.com/

私はほとんどすべての動作を正しくしていますが、完全ではありません。誰かがメニューの外をクリックするたびにメニューを閉じたいのですが、それを強制したので、サブメニューを開こうとするとメニューが閉じます。サブメニューをクリックするとメニュー全体が開いたままになり、誰かがメニューの外側 (ページの他の場所) をクリックすると閉じます。何か案は？

<ul id="menu">

<li><a href="">link</a></li>
<li><a href="">link</a></li>

<li>
<a href="">Submenu</a>

<ul>
<li><a href="">Submenu link</a></li>
<li><a href="">Submenu link</a></li>
<li><a href="">Submenu link</a></li>
</ul>

</li>

<li><a href="">link</a></li>
<li><a href="">link</a></li>

</ul>


<script src="slicknav.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#menu').slicknav({
label:'',
closeOnClick:true
});
});

/* close menu on outside click*/
$("div, html").on("click", function (event) { 
event.stopPropagation();
if(!$(event.target).hasClass("#menu a") && 
!$(event.target).hasClass("ul.slicknav_nav li a") && 
!$(event.target).hasClass("slicknav_menutxt") && 
!$(event.target).hasClass("slicknav_icon") && 
!$(event.target).hasClass("slicknav_icon-bar") &&
!$(event.target).hasClass("slicknav_btn")) {   
$("#menu").slicknav('close'); 
}
});
</script>

これで修正されました：

document.addEventListener('touchstart', onDocumentTouchStart, false);
function onDocumentTouchStart(event) {
    if (event.touches[0] && event.touches[0].target.tagName.toLowerCase() == "div") {
        $("#menu").slicknav('close');
    }
}
4

1 に答える 1

1

クリック ハンドラーを次のように変更します。

/* close menu on outside click*/
$("html").on("click", function (event) {
    if ($(".slicknav_menu").has(event.target).length === 0)
        $("#menu").slicknav('close');
});

基本的に、ターゲットがメニュー内にあるかどうかを確認し、メニュー内にある場合は閉じません。ページにメニューのインスタンスが複数ある場合は、セレクターを適切に変更する必要があります。

于 2015-04-26T02:28:31.827 に答える