jQuery : 스크립트가 갑자기 작동을 멈 춥니 다.

jQuery와 스크립트에 대한 질문을 살펴 보았습니다. 하지만 내 문제를 해결할 수없는 것 같습니다 :jQuery : 스크립트가 갑자기 작동을 멈 춥니 다.

Android 스마트 폰에서보기를 전환하면 scroll.js의 작동이 중지됩니다.

<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 : 링크 못해 심지어 여기

은 index.html을의 ... 목적지로 "점프"

$(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 (모든 웹킷 브라우저와 같음)과 android-browser에서 일어나는 일입니다. Firefox에서 열면 스크롤 기능이 작동하지만 메뉴를 확장 할 수 없습니다. .noConflict()를 시도했지만 링크가 대상으로 점프하고 메뉴가 더 이상 확장되지 않습니다. 보기를 들어

: click me

장치 폭 같은 것들을 무시하십시오. 아직 끝나지 않았지만 테스트를해야합니다.

실제 질문 : 내가 뭘 잘못하고 있니? 충돌이있는 경우 어디서 찾을 수 있습니까?

문제를 재현하려면 브라우저의 크기를 스마트 폰 크기로 조정하고 새로 고치거나 스마트 폰을 사용하십시오. 그렇지 않으면 사이트가 pc 용으로 표시됩니다. 어디서든지 정상적으로 작동합니다.

편집 : 모든 파이어 폭스와 함께 작동하지만, 실제 스마트 폰의 메뉴가 확장되지 않습니다 스마트 폰보기에서 PC에 ...

감사합니다!

출처

2014-10-02 Julia

차이는 있지만 두 개의 문서 준비 처리기가 있음을 유의하십시오. –

on ('click', function() {..}을 사용하여 이벤트를 바인드하려고 시도 할 때 '$ (function() {}); . 그리고 $ (window) .on ('orientationchange'와 $ (window) .on ('resize') ... – patrykf

그래서이 경우에 $ ("# icon-menu" 'click', function() {} ? 죄송합니다.이 내용에 조금 익숙하지 않습니다 ... – Julia

질문에 대한 답변이 충분하지 않습니다.

한 가지 해결책은 모바일 장치의 부드러운 스크롤을 무시하는 것이 었습니다.

<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> 

    <link rel="stylesheet" href="./css/lightbox.css"/> 

    <link rel="stylesheet" href="./css/computer.css" media="screen and (min-device-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-device-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-device-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{ 
      $(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; 
        } 
       } 
      }); 
     }); 
     } 
     }); 
    </script>

그래서 링크 메뉴 문제가 사라,하지만 휴대폰에 대한 원 부드러운 스크롤 효과 역시 여전히 작동하지 않습니다 : 그래서, 코드 기압은 다음과 같습니다.

누군가가 단서가있을 수 있습니다.

모바일보기를 보려면 너비 (해상도가 아님)가 720px 인 장치가 필요합니다.

출처

2014-10-02 13:48:38 Julia

jQuery : 스크립트가 갑자기 작동을 멈 춥니 다.

답변

관련 문제