2016-09-21 3 views
1

У меня проблема с выпадающим меню на мобильном телефоне, Меню открывается только при двойном щелчке. При первом открытии закрывается очень быстро. Второй щелчок открывает выпадающее меню ОК,Ошибка выпадающего меню в мобильном устройстве требует двух кликов

$(document).ready(function() { 
    $('#data-cat-menu .mega-menu a.dropdown').on('click', function(e){ 
     e.preventDefault(); 
     $(this).next('.dropdown-menu').slideToggle(); 

     if($(this).find('span.glyphicon').hasClass('glyphicon-triangle-right')) { 
      $(this).find('span.glyphicon').removeClass('glyphicon-triangle-right'); 
      $(this).find('span.glyphicon').addClass('glyphicon-triangle-bottom'); 
     } else { 
      $(this).find('span.glyphicon').removeClass('glyphicon-triangle-bottom'); 
      $(this).find('span.glyphicon').addClass('glyphicon-triangle-right'); 
     } 
    }); 
}); 

.dropdown-меню уже имеет дисплей: нет, до щелчка.

<div class="dropdown-menu" style="display: none;">...</div> 

Как я могу открыть его одним щелчком мыши?

Edit: Я также попытался остановить()

$(this).next('.dropdown-menu').stop().slideToggle(); 
+0

Может ли ваш первоначальный '.hide()' быть срывающее это? попробуйте изменить это, чтобы жить в вашем CSS и делать 'display: none;' – Adjit

+0

уже пробовал, я отредактировал вопрос, никакого результата. – Santiago

+0

Возможно, попробуйте '.stopPropagation()' вместо '.preventDefault()' – Adjit

ответ

0
$('#data-cat-menu .mega-menu a.dropdown').on('click', function(e){ 
e.stopPropagation(); 
    if($(this).find('span.glyphicon').hasClass('glyphicon-triangle-right')) { 
     $(this).find('span.glyphicon').removeClass('glyphicon-triangle-right'); 
     $(this).find('span.glyphicon').addClass('glyphicon-triangle-bottom'); 
     $(this).next('.dropdown-menu').show(); 
    } else { 
     $(this).find('span.glyphicon').removeClass('glyphicon-triangle-bottom'); 
     $(this).find('span.glyphicon').addClass('glyphicon-triangle-right'); 
     $(this).next('.dropdown-menu').hide(); 
    } 
}); 
0

попробовать следующее:

var dropDown = $(this); 
if(dropDown.hasClass("expanded")){ 
    dropDown.next('.dropdown-menu').slideUp("slow",function(){ 
     dropDown.removeClass("opened"); 
    }); 
}else{ 
    dropDown.next('.dropdown-menu').slideDown("slow",function(){ 
     dropDown.addClass("expanded"); 
    }); 
} 
Смежные вопросы