2015-08-16 2 views
1

У меня проблема с моим меню в мобильном режиме. onClick it 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');  
}); 
+1

Где находится переменная 'nav'? Вы уверены, что у него класс «мобильных»? Вы говорите, что это не исчезает. Что происходит? Вы получаете какие-либо исключения в консоли? – yts

ответ

0

У вас есть несколько вопросов здесь, но важными из них являются:

  1. Нет установленной переменной «nav». Я думаю, вы путаете селектор $() с этой переменной «nav».

  2. На ваших якорных элементах нет «мобильного» класса.

Вы можете избежать пункта if, просто указав право класса якоря в селекторе: $(a.mobile) Вы можете увидеть рабочую версию этого здесь: http://jsfiddle.net/zLLzrs6b/ Я добавил «мобильные» классы для ваших якорей и чистить jQuery.

+0

привет, ive добавил весь мой код выше. я хочу, когда вы нажимаете на раскрывающееся меню, меню остается на месте и не исчезает. не могли бы вы посмотреть? Я попытался добавить ваш код, но он не сделал этого. спасибо – maks

+0

Все мои комментарии по-прежнему применяются. У вас есть неопределенные vars и плохая разметка. – jmargolisvt

Смежные вопросы