[英]need to disable fadeout function for the dropdown (only) menu
I have a problem with my menu in mobile mode. 我在移动模式下的菜单有问题。 onClick it fadesOut. onClick会淡出。 I want to keep this setting, but I don't want it to fadeOut when one clicks on the dropdown part. 我想保留此设置,但是我不希望它在单击下拉部分时淡出。 here is link: http://jsfiddle.net/zLLzrs6b/3/ appreciate your help! 这里是链接: http : //jsfiddle.net/zLLzrs6b/3/感谢您的帮助!
html: HTML:
<nav id="nav-wrap"> <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show Menu</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide Menu</a>
<ul id="nav" class="nav">
<li><a class="smoothscroll mobile" href="#about">about</a>
</li>
<li><a class="smoothscroll mobile" href="#documents">blog</a>
</li>
<li class="nav-item"><a href="#">dropdown</a>
<ul class="langop">
<li><a href="#">otion 1</a>
</li>
<li><a href="#">otion 2</a>
</li>
</ul>
</li>
</ul>
</nav>
css: CSS:
.langop {
display:none;
position: relative;
width:auto;
}
.nav-item:hover .langop {
display: block;
}
java: Java的:
var toggle_button = $("<a>", {
id: "toggle-btn",
html: "Menu",
title: "Menu",
href: "#"
});
var nav_wrap = $('nav#nav-wrap')
var nav = $("ul#nav");
nav_wrap.find('a.mobile-btn').remove();
nav_wrap.prepend(toggle_button);
toggle_button.on("click", function (e) {
e.preventDefault();
nav.slideToggle("fast");
});
if (toggle_button.is(':visible')) nav.addClass('mobile');
$(window).resize(function () {
if (toggle_button.is(':visible')) nav.addClass('mobile');
else nav.removeClass('mobile');
});
$('ul#nav li a').on("click", function () {
if (nav.hasClass('mobile')) nav.fadeOut('fast');
});
Find the clicked element by using event.target
, if it's dropdown part then don't hide 使用event.target
查找被单击的元素,如果它是下拉部分,则不要隐藏
var toggle_button = $("<a>", { id: "toggle-btn", html: "Menu", title: "Menu", href: "#" }); var nav_wrap = $('nav#nav-wrap') var nav = $("ul#nav"); nav_wrap.find('a.mobile-btn').remove(); nav_wrap.prepend(toggle_button); toggle_button.on("click", function(e) { e.preventDefault(); nav.slideToggle("fast"); }); if (toggle_button.is(':visible')) nav.addClass('mobile'); $(window).resize(function() { if (toggle_button.is(':visible')) nav.addClass('mobile'); else nav.removeClass('mobile'); }); $('ul#nav li a').on("click", function(e) { var target = $(".langop"); if (!target.is(e.target) //checking clicked item is the dripdown list && target.has(e.target).length === 0 //chekking clicked element is inside the dropdown && nav.hasClass('mobile')) { nav.fadeOut('fast'); } });
.langop { display: none; position: relative; width: auto; } .nav-item:hover .langop { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <nav id="nav-wrap"> <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show Menu</a> <a class="mobile-btn" href="#" title="Hide navigation">Hide Menu</a> <ul id="nav" class="nav"> <li><a class="smoothscroll mobile" href="#about">about</a> </li> <li><a class="smoothscroll mobile" href="#documents">blog</a> </li> <li class="nav-item"><a href="#">dropdown</a> <ul class="langop"> <li><a href="#">otion 1</a> </li> <li><a href="#">otion 2</a> </li> </ul> </li> </ul> </nav>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.