jQuery Dropdown功能不适用于移动设备

Question

所以我做了一个非常简单的功能，导致下拉菜单显示出来。它在我的电脑上工作正常，但在我的移动设备上却没有。当我单击应该显示下拉菜单的元素时，dropd。菜单不显示。实际上没有任何事情发生。

经过一些调试后，这个循环似乎有些麻烦：

for (i=0;i <= faecher.length;i++) {$(id(faecher[i])).html(faecher[i]+" &#9660");}

这是一个片段：

＆＃13;

＆＃13;

function getMouseX() {
  return (event.clientX + document.body.scrollLeft);
}

function getMouseY() {
  return (event.clientY + document.body.scrollTop);
}

// Position of an element relative to left --> x coordinate
function getLiX(element) {
  var pos = $(element).position();
  return pos.left;
}

// Position of an element relative to top --> y coordinate
function getLiY(element) {
  return $(element).height();
}

// Just a name list for my elements
var faecher = ["physik", "mathematik", "chemie", "latein", "info", "profil"];

// Sets a # before an element name
function id(id) {
  return "#" + id;
}

// The main dropdown function
function dd(ex) {
  var jId = id(ex);

  document.getElementById("agenda").innerHTML = "1";

  for (i = 0; i <= faecher.length; i++) {
    $(id(faecher[i])).html(faecher[i] + " &#9660");
  }

  document.getElementById("agenda").innerHTML = "2";

  $(jId).html(ex + " &#9650");

  document.getElementById("agenda").innerHTML = "3";

  for (i = 0; i <= faecher.length; i++) {
    $(id(faecher[i])).css({
      "background": "none",
      "color": "#ffffff"
    });
  }

  document.getElementById("agenda").innerHTML = "4";

  $(jId + "DD").css('position', 'absolute');

  document.getElementById("agenda").innerHTML = "5";

  $(jId + "DD").css('top', getLiY(jId));

  document.getElementById("agenda").innerHTML = "6";

  $(jId + "DD").css('left', getLiX(jId));

  document.getElementById("agenda").innerHTML = "7";

  if ($(jId + "DD").css("display") != "none") {
    $(jId).css({
      "background": "none",
      "color": "#ffffff"
    });
    $(jId).html(ex + " &#9660");
  } else {
    $(jId).css({
      "background": "rgba(255, 255, 255, 0.97)",
      "color": "#000000"
    });
    for (i = 0; i <= faecher.length; i++) {
      $(id(faecher[i] + "DD")).slideUp(250);
    }
  }

  document.getElementById("agenda").innerHTML = "8";

  $(jId + "DD").outerWidth($(jId).outerWidth());

  document.getElementById("agenda").innerHTML = "9";

  $(jId + "DD").slideToggle(500);

  document.getElementById("agenda").innerHTML = "10";

}

function physikClick() {
    document.getElementById("agenda").innerHTML = "Click";
    dd("physik");
  } // .innerHTML just for debugging

function mathematikClick() {
  dd("mathematik");
}

function chemieClick() {
  dd("chemie");
}

function lateinClick() {
  dd("latein");
}

function infoClick() {
  dd("info");
}

function profilClick() {
  dd("profil")
}

＆＃13;

@font-face {
  font-family: "aspace";
  src: local("../media/font/aspace.otf"), url("../media/font/aspace.otf") format("OpenType")
}
@font-face {
  font-family: "Nero";
  src: local("../media/font/nero.otf"), url("../media/font/nero.otf") format("OpenType")
}
@font-face {
  font-family: "MOONBEAM";
  src: local("../media/font/moonbeam.ttf"), url("../media/font/moonbeam.ttf") format("TrueType")
}
@font-face {
  font-family: "GOOD TIMES";
  src: local("../media/font/goodtimes.ttf"), url("../media/font/goodtimes.ttf") format("TrueType")
}
@font-face {
  font-family: "Induction";
  src: local("../media/font/induction.ttf"), url("../media/font/induction.ttf") format("TrueType")
}
@font-face {
  font-family: "Ethnocentric";
  src: local("../media/font/ethnocentric.ttf"), url("../media/font/ethnocentric.ttf") format("TrueType")
}
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;
}
body {
  background-size: cover;
  overflow: auto;
  background-repeat: repeat-x;
  font-family: Arial, Helvetica;
  text-align: justify;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-color: #335588;
  /*background-image:url(../media/img/wa3.jpg),url(../media/img/wa2.jpg),url(../media/img/wa1.jpg),url(../media/img/wa4.jpg),url(../media/img/wa5.jpg);*/
}
h1 {
  color: #FFFFFF;
  font-family: "NEON CLUB MUSIC", "aspace", "MOONBEAM";
  text-align: center;
}
h2,
h3,
h4,
h5,
h6 {
  color: #FFFFFF;
  font-family: "GOOD TIMES", "aspace", "MOONBEAM";
  text-align: center;
  letter-spacing: 2em;
}
a {
  text-decoration: none;
  color: #ffffff;
}
button,
input[type=submit],
input[type=reset] {
  outline: none;
  text-align: center;
  padding-top: 5px;
  font-family: "Good Times";
  font-size: 17px;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  background: rgba(0, 0, 0, .6);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  border-radius: 0.2em;
  -webkit-border-radius: 0.2em;
  -moz-border-radius: 0.2em;
  box-shadow: .05em .05em .3em #ffffff;
  text-shadow: 0.1em 0.1em 0.3em rgba(255, 255, 255, 0.5)
}
button:hover,
input[type=submit]:hover,
input[type=reset]:hover {
  background: rgba(255, 255, 255, 1);
  color: rgba(0, 0, 0, 1);
  border-radius: 0.3em;
  -webkit-border-radius: 0.3em;
  -moz-border-radius: 0.3em;
  box-shadow: .25em .25em .5em #eeeeee;
  cursor: pointer;
  text-shadow: 0.1em 0.1em 0.3em rgba(0, 0, 0, 1);
}
input[type=button] {
  width: 25px;
  height: 25px;
  outline: none;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  background: rgba(0, 0, 0, .6);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  box-shadow: .05em .05em .3em #ffffff;
}
input[type=button]:hover {
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 1);
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  box-shadow: .25em .25em .5em #eeeeee;
  cursor: pointer;
}
input[type=password],
input[type=file],
select,
option,
input[type=text],
input[type=search],
input[type=date],
input[type=number],
input[type=email],
textarea {
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  outline: none;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: #ffffff;
  padding: 2px;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}
input[type=password]:focus,
input[type=file]:focus,
select:focus,
option:focus,
input[type=text]:focus,
input[type=date]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=email]:focus,
textarea:focus {
  border: 1px solid #ffffff;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}
input[type=password]::-webkit-input-placeholder,
input[type=file]::-webkit-input-placeholder,
select::-webkit-input-placeholder,
option::-webkit-input-placeholder,
input[type=text]::-webkit-input-placeholder,
input[type=date]::-webkit-input-placeholder,
input[type=number]::-webkit-input-placeholder,
input[type=email]::-webkit-input-placeholder,
input[type=search]::-webkit-input-placeholder {
  color: rgba(50, 50, 50, 0.9);
  text-shadow: none;
  -webkit-text-fill-color: initial;
}
option: {
  background: #ffffff;
  color: rgba(0, 0, 0, .6)
}
table {
  border-spacing: 0.5em;
  display: table;
  border-collapse: collapse;
  border-color: #ffffff;
  padding: 0.3em;
  empty-cells: hide;
  table-layout: auto;
  width: 100%;
  overflow: auto;
  font-weight: normal;
  text-align: left;
}
table th,
table td {
  border: 1px solid #ffffff;
  padding: 0.3em;
  height: 1em;
  overflow: auto;
  font-weight: normal;
}
table .alt td {} #title {
  position: relative;
  text-align: center;
  z-index: 5;
  margin-top: 4em;
  background: transparent;
}
#menubar {
  left: 0;
  right: 0;
  position: fixed;
  background: rgba(0, 0, 0, .8);
  z-index: 10;
  top: 0;
  height: 3em;
  vertical-align: middle;
  line-height: 3em;
  overflow: auto;
  box-shadow: 0 .1em .9em #000000;
}
.mb {
  margin: 0;
  list-style-type: none;
  font-family: "Good Times", "Arial";
  vertical-align: middle;
}
.mb li {
  display: inline;
  -webkit-transition: all 0.7s;
  transition: all 0.7s;
  height: 100%;
  padding-left: 1em;
  padding-right: 1em;
  float: left;
  vertical-align: middle;
}
.mb li:hover {
  background: rgba(255, 255, 255, 0.97) !important;
  color: #000000 !important;
}
.dropdown {
  z-index: 11;
  /*border-radius:0.2em;
	-webkit-border-radius:0.2em;
	-moz-border-radius:0.2em;*/
  background: rgba(255, 255, 255, 0.92);
  display: none;
  padding: 0.2em;
  padding-left: 0.3em;
  padding-top: 0.3em;
  font-size: 1.2em;
  background-clip: border-box;
  text-align: left;
  overflow: auto;
}
.dropdown a {
  background-clip: border-box;
  padding: 0 0;
}
.dropdown a:hover {
  /*text-shadow: 0.5em 0.5em 1em #000000;*/
  /*font-size:1.05em;*/
  font-weight: bold;
}
#profil {
  float: right;
}
.prlxcntr {
  position: absolute;
  top: 0;
  margin: 0;
  padding: 0;
}
#main {
  background: rgba(0, 0, 0, 0);
  color: #ffffff;
  padding: 1px;
  position: relative;
  display: block;
  border-top: 1px solid #ffffff;
  width: 100%;
  left: 0;
  right: 0;
  text-align: center;
  margin: 0 auto;
  z-index: 5;
}
#main h2 {
  color: #ffffff;
  font-family: "GOOD TIMES";
}
.text {
  text-align: justify;
  padding: 1em;
  font-size: 1.3em;
}
#footer {
  bottom: 0;
  position: fixed;
  background: rgba(0, 0, 0, .8);
  left: 0;
  right: 0;
  text-align: center;
  color: #ffffff;
  padding: 0.2em;
  overflow: auto;
  z-index: 10;
}
.ddp {
  color: rgba(0, 0, 0, 1);
}
.mainNav {
  overflow: auto;
  width: 98%;
}
.mainNav ul {
  list-style-type: none;
}
.mainNav ul li {
  display: inline;
  transition: all 0.0s;
  -webkit-transition: all 0.0s;
}
.mainNav ul li:hover {
  display: inline;
  border-bottom: 1px solid #ffffff;
  cursor: pointer;
}
.div[id^="woerterliste"] {
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  width: 100%;
  background: red;
}
#menubar2 {
  left: 0;
  right: 0;
  position: fixed;
  background: rgba(255, 255, 255, .8);
  z-index: 9;
  top: 3em;
  height: 3em;
  vertical-align: middle;
  line-height: 3em;
  overflow: auto;
  color: #000000;
  box-shadow: 0 .1em .9em #000000;
}
.mb2 {
  margin: 0;
  list-style-type: none;
  font-family: "Good Times", "Arial";
  vertical-align: middle;
  color: #000000;
}
.mb2 li {
  display: inline;
  -webkit-transition: all 0.7s;
  transition: all 0.7s;
  height: 100%;
  float: left;
  padding-left: 1em;
  padding-right: 1em;
  vertical-align: middle;
  color: #000000;
}
.mb2 li:hover {
  cursor: pointer;
  background: rgba(0, 0, 0, 0.97) !important;
  color: #ffffff !important;
}
.ueberschrift {
  font-family: Ethnocentric;
  text-shadow: .1em .1em .5em #000000;
}

＆＃13;

<!DOCTYPE html>
<html lang="ch_DE">

<head>
  <title>My Site</title>
  <meta charset="UTF-16" />
  <!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
  <link rel="stylesheet" type="text/css" href="css/universal.css"></link>
  <link rel="stylesheet" type="text/css" href="css/idsAndClasses.css"></link>
  <link rel="icon" href="media/img/logo.png" type="image/x-icon"></link>
  <!--<script src="js/bootstrap.min.js"></script>-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="js/scrollmagic/minified/ScrollMagic.min.js"></script>
  <script type='text/javascript' src='js/jquery.marquee.min.js'></script>
  <script src="js/bitballoon.js"></script>
  <script src="js/forms.js"></script>
  <script src="js/client.js"></script>
  <script src="js/functions.js"></script>
  <!--<script src="js/styleManagement.js"></script>-->
  <script src="js/clientManagement.js"></script>
  <script src="js/parallax.js"></script>
  <script>
    $(document).on('beforeunload', function() {
      $(document).scrollTop(0);
    });
  </script>
</head>

<body background="media/img/wa2.jpg" onload="scrollToTop()">
  <!--<div class="prlxcntr" data-parallax="scroll" data-position="top" data-bleed="10" data-image-src="media/img/doubleNebula.jpg" data-natural-width="1400" data-natural-height="900">-->
  <!-- http://i.imgur.com/kJiOdp8.jpg -->

  <nav id="menubar">
    <ul class="mb">
      <a href="index.html" title="Home">
        <li id="home">Home
        </li>
      </a>
      <a href="#physik" onclick="physikClick()" title="Physik">
        <li id="physik">Physik &#9660;
        </li>
      </a>
      <a href="#mathematik" onclick="mathematikClick()" title="Mathematik">
        <li id="mathematik">Mathematik &#9660;
        </li>
      </a>
      <a href="#chemie" onclick="chemieClick()" title="Chemie">
        <li id="chemie">Chemie &#9660;
        </li>
      </a>
      <a href="#latein" onclick="lateinClick()" title="Latein">
        <li id="latein">Latein &#9660;
        </li>
      </a>
      <a href="#info" onclick="infoClick()" title="Info">
        <li id="info">Info &#9660;
        </li>
      </a>
      <a href="#profil" onclick="profilClick()" title="Profil">
        <li id="profil">Profil &#9660;
        </li>
      </a>
    </ul>
  </nav>
  <div class="parallax-window" id="title">
    <h1 style="letter-spacing: 2em;" title='"Insert Easter Egg here."'>My Site</h1>
  </div>
  <!-- DROP DOWN DIV CONTAINERS -->
  <div id="physikDD" class="dropdown"><a class="ddp" href="doc/physik/startseite.html">Theorie
				</a>
    <br /><a class="ddp" href="#formellehre">Formellehre
				</a>
    <br /><a class="ddp" href="#uebungen">&#220;bungen
				</a>
  </div>
  <div id="mathematikDD" class="dropdown"><a class="ddp" href="#theorie">Theorie
				</a>
    <br /><a class="ddp" href="#formellehre">Formellehre
				</a>
    <br /><a class="ddp" href="#uebungen">&#220;bungen
				</a>
  </div>
  <div id="chemieDD" class="dropdown"><a class="ddp" href="#theorie">Theorie
				</a>
    <br /><a class="ddp" href="#uebungen">&#220;bungen
				</a>
  </div>
  <div id="infoDD" class="dropdown"><a class="ddp" href="#agenda">Agenda
				</a>
    <br /><a class="ddp" href="doc/info/kontakt.html">Kontakt
				</a>
    <br /><a class="ddp" href="#ueber">&#220;ber
				</a>
  </div>
  <div id="lateinDD" class="dropdown"><a class="ddp" href="#grammatik">Grammatik
				</a>
    <br /><a class="ddp" href="doc/latein/woerter.html">W&#246;rter
				</a>
  </div>
  <div id="profilDD" class="dropdown">
    <!--<span id="profilName" style="color:white;text-decoration:underline;">Profil:</span><br />
			<a href="doc/login.html">Anmelden</a><br /><a href="doc/registry.html">Registrieren</a>
			--><b style="color: #ff7777;">IN ARBEIT</b>
  </div>

  <!-- MAIN DIV CONTAINER -->


  <section class="text">
    <h4 id="agenda">Debug Text</h4>
  </section>

  <!-- FOOTER DIV CONTAINER -->


  <!--</div>-->
</body>

</html>

＆＃13;

＆＃13;

＆＃13;

你知道为什么这不能用于移动设备吗？