2016-08-03 4 views
1

Я работаю над устаревшим веб-сайтом, который имеет много проблем, но один из них действительно раздражает и запутывает. В нем есть выпадающее меню, которое просто переключается с использованием условий jquery.Выпадающее меню, исчезающее при событии касания

Проблема - когда я открываю ее на iPhone/Android и прокручиваю вниз, чтобы увидеть остальные пункты меню, меню исчезает.

Вот скрипт, который загружает его:

/* MOBILE COLLAPSE MENU */ 
;(function ($) { 
    $.fn.collapsable = function (options) { 
    // iterate and reformat each matched element 
    return this.each(function() { 
    // cache this: 
    var obj = $(this) 
    var tree = obj.next('.mobile_navigation') 
    obj.click(function() { 
    if (obj.is(':visible')) {tree.toggle();} 
    }) 
    $(window).resize(function() { 
    if ($(window).width() <= 480) {tree.attr('style', '');} 
    }) 
}) 
} 
})(jQuery) 

Как я могу это исправить? Я предполагаю, что это имеет какое-то отношение к функции $ (window) .resize, поскольку она загружает меньший видовой экран, но я не знаю, что с этим делать.

+1

Вы можете удалить то OnClick событие, когда вы находитесь в мобильном устройстве и добавить близко кнопка. –

+2

Вы пытались прокомментировать часть изменения размера? Я думаю, что именно здесь возникла ваша проблема, и, может быть, вам это больше не нужно, если вы хотите иметь такое же поведение на рабочем столе и на мобильном телефоне. – shwarp

+0

. Я пытался изменить его по своему вкусу, но не пробовал комментировать его ... Спасибо, что сделал это, пока. – snkv

ответ

0

Пожалуйста, проверьте Вы импортируете jquery импорт библиотеки дважды ..

или

Попробуйте один

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script> 
    $(document).ready(function(){ 
     $("button").click(function(){ 
     $("p").slideToggle(); 
    }); 
    }); 
</script> 
</head> 
<body> 
<div> 
<button>Toggle slideUp() and slideDown()</button> 
</div> 

<p><a href="#">Link 1</a></p> 
<p><a href="#">Link 1</a></p> 
<p><a href="#">Link 1</a></p> 
<p><a href="#">Link 1</a></p> 

</body> 
</html> 
Смежные вопросы