我正在用一个简单的下拉菜单构建一个小网站。在桌面上，当你们将鼠标悬停在一个项目上时，你们会得到一个下拉列表，很简单。
然而，在无法正常工作的触摸屏上，我可以点击一个项目，它会生成下拉菜单，但我不能通过点击父菜单项来关闭下拉菜单。
不幸的是，我真的不懂JavaScript，所以我还不能完全弄清楚到目前为止我在这个网站上找到的大多数解决方案。
这是我在jsfiddle的网站：https://jsfiddle.net/y1v8zsc5/
和实时版本：raihansharif.site90.com
代码很长。。。
HTML:
<body>
<div id="wrapper">
<div class="header">
<h1 id="header-text">Basics of Web Design</h1>
<div class="nav">
<a href="#" class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</a>
<ul class="clearfix menu">
<li><a href="#">Home</a>
<ul class="submenu">
<li><a href="#">sub heading 1</a></li>
<li><a href="#">sub heading 2</a></li>
<li><a href="#">sub heading 3</a></li>
<li><a href="#">sub heading 4</a></li>
<li><a href="#">sub heading 5</a></li>
<li><a href="#">sub heading 6</a></li>
</ul>
</li>
<li><a href="#">HTML</a>
<ul class="submenu">
<li><a href="#">sub heading 3</a></li>
<li><a href="#">sub heading 1</a></li>
<li><a href="#">sub heading 2</a></li>
<li><a href="#">sub heading 3</a></li>
<li><a href="#">sub heading 4</a></li>
<li><a href="#">sub heading 5</a></li>
<li><a href="#">sub heading 6</a></li>
</ul>
</li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Aesthetics</a></li>
</ul>
</div> <!-- nav -->
</div> <!-- header -->
<div id="main">
<div id="article">
<h1 id="headline">Welcome to Basics of Web Design</h1>
<p>
Mea te probo aperiam, phaedrum imperdiet dissentiunt mea id. Harum molestiae cu eum, his ne doming propriae, delectus adolescens pro ei. Mea dicam dolorem te, mei eu prompta quaerendum, duo id sanctus albucius scripserit. Ex qui graecis honestatis concludaturque, te sed porro impedit reformidans, legimus accusata vim te.
</p>
</div> <!-- article -->
</div> <!-- main -->
<div id="aside">
<ul id="fixednav">
<li><a href="#">Logical separation of structure and style</a></li>
<li><a href="#">sub heading 2</a></li>
<li><a href="#">sub heading 3</a></li>
<li><a href="#">sub heading 4</a></li>
<li><a href="#">sub heading 5</a></li>
<li><a href="#">sub heading 6</a></li>
</ul>
</div>
<div id="footer-wrapper">
<div class="footer">
<ul class="footer-info">
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Resources</a></li>
</ul>
</div> <!-- Footer -->
</div><!-- Footer wrapper -->
</div> <!-- wrapper -->
</body>
CSS：
/* *resets everything */
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
/* top level styles, applies to all listed elements/classes unless overridden */
html, body {
height: 100%;
background-color: #4A4A4A;
background-repeat: repeat;
}
/* some default text and other styling */
body {
font: 1em'Roboto', sans-serif;
color: #C9C9C9;
background-color: #dddd;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#wrapper{
min-height: 100%;
min-width: 100%;
position: absolute;
}
/* ul anchors all have the below effects unless overridden */
ul a {
font-weight: bold;
text-align: center;
color: #737575;
cursor: pointer;
text-decoration: none;
background-color: #f5f5f5;
cursor: pointer;
}
li a:active{
color: black;
}
.nav ul a:active{
color: black;
}
/* all h1 tags have these effects */
h1 {
font: 2em'Open Sans', sans-serif;
text-align: left;
color: #E8E8E8;
text-shadow: 0px 1px 1px #4d4d4d;
font-weight: normal;
}
/* all paragraphs get 1em total margin at top/bottom */
p {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.header{
background-color: #CFD1D1
}
#header-text {
padding: 30px 0;
font: 4em 'Open Sans', sans-serif;
text-align: center;
color: #737575;
text-shadow: 0px 1px 1px #4d4d4d;
}
.nav {
height: 3.6em;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
background-color: #f5f5f5;
/* adds box shadow */
-webkit-box-shadow: -1px 3px 5px 0px rgba(52, 44, 77, 1);
-moz-box-shadow: -1px 3px 5px 0px rgba(52, 44, 77, 1);
box-shadow: -1px 3px 5px 0px rgba(52, 44, 77, 1);
z-index: 3;
}
ul {
list-style: none;
max-width: 900px;
margin: 0 auto;
}
ul a {
display: block;
padding: 20px;
/* padding-right: 0 !important;
/* important overrides media queries */
font-size: 13px;
text-align: center;
color: #737575;
text-decoration: none;
background-color: #f5f5f5;
}
li {
float: left;
width: 20%;
border-left: 1px solid #ddd;
position: relative;
}
.nav li:last-child, .footer-info li:last-child {
border-right: 1px solid #ddd;
}
.nav > li > ul li{
float: left;
position: relative;
}
ul.submenu {
display: none;
}
ul.submenu li {
width: 100%;
background: #eee;
z-index: 3;
border: none;
}
ul.submenu li a {
width: 100%;
padding: 6px;
}
.nav ul.menu > li:hover ul.submenu {
float: none;
display: block;
background: #eee;
}
ul.menu > ul.submenu {
float: none;
display: block;
background: #eee;
}
#main{
margin: 0.5em;
margin-bottom: 3em;
display: block;
float: left;
clear: both;
padding-bottom: 1em;
}
#article{
float: right;
margin-top: 80px;
margin-right: 15%;
margin-left: 15%;
}
#aside{
position: fixed;
margin-top: 6em;
margin-bottom: 5px;
margin-right: 5px;
width: 14%;
border-bottom: 1px solid #ddd;
background-color: #f5f5f5;
/* adds box shadow */
-webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75);
box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75);
float: left;
}
ul#fixednav li{
list-style: none;
float: none;
width: 100%;
border-top: 1px solid #ddd;
}
ul#fixednav li a{
padding: 10px;
text-align: left;
}
#headline{
text-align: left;
font-size: 2em;
}
#article a{
color: white;
}
#article a:hover{
background: rgb(115, 117, 117);
border-radius: 0.3em;
}
ul a:hover {
background: #eee;
}
#tim{
position: relative;
float: right;
border: 1px solid black;
height: 30em;
margin: 1em;
}
/* footer, attmep to style like nav bar */
#footer-wrapper{
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
clear: both;
}
.footer{
position: relative;
height: 3.6em;
background-color: #f5f5f5;
left: 0px;
right: 0px;
}
.footer li{
width: 33.3%;
}
@media only screen and (max-width: 600px) {
.hamburger {
padding: 15px;
display: block;
}
.line {
border-bottom: 4px solid #bbb;
width: 35px;
margin-bottom: 6px;
}
.line:last-child {
margin-bottom: 0;
}
.nav li {
width: 100%;
z-index: 3;
}
.menu {
height: 0;
z-index: 3;
overflow: hidden;
transition: height 0.3s linear;
-webkit-box-shadow: -1px 3px 5px 0px rgba(52, 44, 77, 1);
-moz-box-shadow: -1px 3px 5px 0px rgba(52, 44, 77, 1);
box-shadow: -1px 3px 5px 0px rgba(52, 44, 77, 1);
}
#aside{display: none;}
h1#header-text {
padding: 3px 0;
font: 3em'Open Sans', sans-serif;
}
.slide-down {
height: auto;
}
#article{
margin: 0 auto;
padding: 5px;
padding-bottom: 4em;
}
img#tim{
border: 1px solid black;
margin: auto;
width: 90%;
height: auto;
margin-top: 0.5em;
margin-bottom: 0.5em;
display: block;
float: none;
}
#headline{
font-size: 2em;
margin-top: 1em;
margin-bottom: 0.5em;
}
}
Js:
$('.hamburger').on('click', function(e) {
// Prevent link from jumping to the top of the page
e.preventDefault();
// If menu is already showing, slide it up. Otherwise, slide it down.
$('.menu').toggleClass('slide-down');
});
document.addEventListener('touchmove', function(e) {
e.preventDefault();
var touch = e.touches[0];
alert(touch.pageX + " - " + touch.pageY);
}, false);
您使用touchmove侦听器类型而不是touchend监听器类型，并将其应用于整个页面而不仅仅是菜单。
$('.menu li').addEventListener('touchend', function(e){
e.preventDefault();
$(this).find('ul').toggle();
});