Javascript將不會在手機上觸發 - 但在桌面上工作正常

因此，我得到了這樣一個奇怪的問題。首先，我知道手機和臺式機之間有一些區別，但似乎沒有任何作用。我認爲這是我的引導，因爲如果我刪除我的bootstrap然後它會工作 - 所以在這種情況下，我不認爲這是「click.funktion」。

我的代碼如下：

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <title>Danish Bread Studio</title> 
    <!-- Almindelig CSS --> 
    <link href="stylesheet.css" rel="stylesheet"> 
    <!-- Bootstrap --> 
    <link href="css/bootstrap.css" rel="stylesheet"> 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.js"></script> 
    <!-- Javascript --> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $(".dbs, .raavarer, .baeredygtighed, .butikker").hide(); 
     $("#topleft, #topright, #bottomleft, #bottomright").click(function(){ 
       $(".dbs, .raavarer, .baeredygtighed, .butikker").hide(); 
       return false; 
     }); 
     $("#topleft").click(function(){ 
       $(".dbs").show(); 
       return false; 
     }); 
     $("#topright").click(function(){ 
       $(".raavarer").show(); 
       return false; 
     }); 
     $("#bottomleft").click(function(){ 
       $(".baeredygtighed").show(); 
       return false; 
     }); 
     $("#bottomright").click(function(){ 
       $(".butikker").show(); 
       return false; 
     }); 
    }); 
    </script> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
</head> 
<body> 
<!-- Generelt --> 
<nav class="hidden-xs"> 
    <div> 
     <li><a id="topleft" class="topleft" href="#">DANISH<br>BREAD<br>STUDIO<br></a></li> 
     <li><a id="topright" class="topright" href="#">RÅVARER</a></li> 
     <li><a id="bottomleft" class="bottomleft" href="#">BÆRE-<br>DYGTIGHED</a></li> 
     <li><a id="bottomright" class="bottomright" href="#">BUTIKKER</a></li> 
    </div> 
</nav> 

<!-- Mobil --> 
<nav class="visible-xs navbar navbar-inverse navbar-fixed-top"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand">Danish Bread Studio</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a id="topleft" href="#">DANISH BREAD STUDIO</a></li> 
     <li><a id="topright" href="#">RÅVARER</a></li> 
     <li><a id="bottomleft" href="#">BÆREDYGTIGHED</a></li> 
     <li><a id="bottomright" href="#">BUTIKKER</a></li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 
<div id="box" class="dbs"> 
    Lorem putent definiebas mea ex, ne pro probo graeci. Ei eam insolens perpetua tractatos, et nam ponderum evertitur, ius omnes mnesarchum comprehensam no. Offendit postulant ex mel, cum adolescens scripserit ne, te sumo tacimates splendide est. No natum simul nemore mea, prima graeco elaboraret sed cu, mea labores antiopam te.1 
</div> 
<div id="box" class="raavarer"> 
    Lorem putent definiebas mea ex, ne pro probo graeci. Ei eam insolens perpetua tractatos, et nam ponderum evertitur, ius omnes mnesarchum comprehensam no. Offendit postulant ex mel, cum adolescens scripserit ne, te sumo tacimates splendide est. No natum simul nemore mea, prima graeco elaboraret sed cu, mea labores antiopam te.2 
</div> 
<div id="box" class="baeredygtighed"> 
    Lorem putent definiebas mea ex, ne pro probo graeci. Ei eam insolens perpetua tractatos, et nam ponderum evertitur, ius omnes mnesarchum comprehensam no. Offendit postulant ex mel, cum adolescens scripserit ne, te sumo tacimates splendide est. No natum simul nemore mea, prima graeco elaboraret sed cu, mea labores antiopam te.3 
</div> 
<div id="box" class="butikker"> 
    Lorem putent definiebas mea ex, ne pro probo graeci. Ei eam insolens perpetua tractatos, et nam ponderum evertitur, ius omnes mnesarchum comprehensam no. Offendit postulant ex mel, cum adolescens scripserit ne, te sumo tacimates splendide est. No natum simul nemore mea, prima graeco elaboraret sed cu, mea labores antiopam te.4 
</div> 
</body> 
</html>

來源

2015-07-10 KamK

哥們，結束標記之前，請務必把你的腳本代碼。其最佳實踐 –

我不確定你的意思。我的腳本代碼在頭上。我會說這是身體標記之前：P我做錯了什麼？ – KamK

你把你的腳本放在標籤之前，那我的 –

Put your script code and bottom. 

Try this :- 
$(document).on('click', '#bottomright', function(event) { 
    $(".butikker").show(); 
    return false;   
});

來源

2015-07-10 09:03:45

如果我這樣做，所有我的「盒子」將出現在加載網站 - 沒有任何功能將起作用。這就像它取代「$（document）.ready（function（）」。這是對的，是嗎？ – KamK

Javascript將不會在手機上觸發 - 但在桌面上工作正常

回答

相關問題