Question

移动模式下我的菜单有问题。 onClick它fadesOut。我想保留这个设置，但是，当我点击菜单的下拉部分时，我希望它什么都不做。这是链接：http://jsfiddle.net/zLLzrs6b/3/ 感谢您的帮助！

也是我的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：

.langop 
{
display:none;
position: relative;
width:auto;
}

.nav-item:hover .langop {
display: block;
}

的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');      
});

Answer 1

这里有几个问题，但重要的是：

没有＆＃34; nav＆＃34;变量被设定。我认为你让$（）选择器混淆了这个＆＃34; nav＆＃34;变量。
没有＆＃34;移动＆＃34;你的主要元素上的课程。

您可以通过在选择器中直接指定锚类来避免if子句：$(a.mobile)您可以在此处查看其工作版本：http://jsfiddle.net/zLLzrs6b/我已添加＆＃34;移动＆＃34;你的知识分子的类和清理jQuery。

手机中的下拉菜单问题

1 个答案: