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将不会在手机上触发 - 但在桌面上工作正常

回答

相关问题