Итак, я просмотрел вопросы о jQuery, и скрипты перестали работать. Но, похоже, они не подходят моей проблеме:jQuery: скрипт внезапно перестает работать
Когда я переключаю вид на свой Android-смартфон, scroll.js перестает работать. Звенья обыкновение даже "перепрыгивать" к месту назначения ...
Вот index.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="./js/lightbox.min.js"></script>
<script type="text/javascript" src="./js/scroll.js"></script>
<link rel="stylesheet" href="./css/lightbox.css"/>
<link rel="stylesheet" href="./css/computer.css" media="screen and (min-width:981px)"></link>
<!-- <link rel="stylesheet" href="./css/tablet-portrait.css" media="screen and (max-width:980px)"> -->
<!-- <link rel="stylesheet" href="./css/tablet-landscape.css" media="screen and (max-width:)"> -->
<link rel="stylesheet" href="./css/phone-portrait.css" media="screen and (max-width:720px)">
<!-- <link rel="stylesheet" href="./css/phone-landscape.css" media="screen and (max-width:)"> -->
<script type="text/javascript">
var next_move = "expand";
$(document).ready(function(){
if (window.matchMedia('(max-width: 720px)').matches) {
$("#icon-menu").on('click',function(){
if (next_move == "expand"){
$("#navigation").animate({left: '50%'});
$("body").animate({left: '50%'});
next_move = "shrink";
} else {
$("#navigation").animate({left: '0%'});
$("body").animate({left: '0%'});
next_move = "expand";
}
});
}
else{
}
});
</script>
</head>
и scroll.js:
$(function() {
$('a[href*=#]:not([href=#])').on('click',function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Что еще происходит там просто происходит с Chrome (думаю, все браузеры webkit) и андроид-браузер. Когда я открываю его с помощью Firefox, прокрутка работает, расширение меню не работает. Я пробовал .noConflict(), но он просто сделал, что ссылки переходят к месту назначения, и меню больше не расширялось.
Для просмотра: click me
Пожалуйста, игнорировать такие вещи, как устройство ширины. Это еще не закончено, но я должен проверить его.
Итак, настоящий вопрос: Что я делаю неправильно? Если есть конфликты, где я могу их найти и исправить?
Чтобы воспроизвести проблему, просто измените размер браузера на размер смартфона и обновите его или используйте вместо него смартфон. В противном случае сайт отображается для ПК, где все работает нормально.
Edit: На компьютере в смартфоне ракурса все работает с Firefox, но на фактическом смартфоне меню не будет расширяться ...
Спасибо!
Не то, чтобы это изменило ситуацию, но учтите, что у вас есть два обработчика документов. '$ (function() {});' является просто ярлыком для '$ (document) .ready (function {});' :) –
Попробуйте привязать события с помощью ('click', function() {.. И попытайтесь восстановить его $ (window) .on ('orientationchange' и $ (window) .on ('resize' ... – patrykf
Итак, в этом случае $ ("# icon-menu"). On ('click', function() {} ? Извините, немного новичок в этом материале ... – Julia