Question

）

所以..我遇到了这种奇怪的问题。首先，我知道移动设备和桌面设备之间存在一些差异，但似乎没有任何效果。我认为这是我的引导程序，因为如果我删除我的引导程序然后它会工作 - 所以在这种情况下我不认为这是“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>

Answer 1

Put your script code and bottom.

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

Javascript不会在手机上触发 - 但在桌面上运行正常

1 个答案: