我正在尝试制作一个触摸友好的下拉菜单，但不知道该怎么做。 这是我到目前为止所拥有的:
<div class="mainMenu">
<nav role='navigation'>
<ul class="active">
<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a href="#">Home</a></li>
<li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10"><a href="#">Dropdown</a>
<ul class="sub-menu">
<li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a href="#">SubMenu</a></li>
<li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16"><a href="http://#">SubMenu</a></li>
<li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a href="http://#">SubMenu</a></li>
<li id="menu-item-109" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-109"><a href="#">SubMenu</a></li>
</ul>
</li>
<li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14"><a href="http://#">Dropdown process</a>
<ul class="sub-menu">
<li id="menu-item-110" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-110"><a href="#">SubMenu</a>
<ul class="sub-menu">
<li id="menu-item-111" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-111"><a href="#">SubMenu</a></li>
</ul>
</li>
<li id="menu-item-114" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-114"><a href="#">SubMenu</a></li>
</ul>
</li>
<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13"><a href="http://#">Menu</a></li>
</ul>
</nav>
</div>
演示:https://fiddle.jshell.net/cb8ev58m/
这是一个 wordpress 菜单。 我如何确保当用户单击下 zipper 接时，他们不会被重定向到该页面，而是打开下拉菜单。如果他们再次点击该链接，则会被重定向。
最佳答案
第一次点击 - 打开，第二次 - 重定向。 但是隐藏子菜单呢？
var clicked = {};
$('.menu-item-has-children > a').on('click', function(e){
var $li = $(this).closest('li');
$li.siblings().each(function(){
$(this).find('.sub-menu').slideUp();
$(this).find('.menu-item-has-children').each(function(){
var id = $(this).attr('data-id');
if( id in clicked) delete clicked[id];
})
});
if( !($li.attr('data-id') in clicked)){
e.preventDefault();
clicked[$li.attr('data-id')] = true;
}
$li.find('.sub-menu').slideDown();
}).mainMenu {
position: fixed;
z-index: 3;
width: 100%;
top: 0;
left: 0;
}
.mainMenu nav ul {
position:absolute;
top: 0px;
margin: 0px;
left:0px;
width: 100%;
text-align: center;
background:rgba(0,0,0,.8);
font-size: 20pt;
list-style-type: none;
}
.mainMenu nav ul li {
color:white;
padding: 10px;
margin-left: 50px;
margin-right: 50px;
font-weight: bold;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
transition: all ease 0.5s;
}
.mainMenu nav ul li:hover,
.mainMenu nav ul li:focus {
background-color: #FFCA00;
color: #fff;
font-weight: bold;
}
.mainMenu nav ul li a {
color:white;
font-weight: bold;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
transition: all ease 0.5s;
}
.mainMenu nav ul li a:hover {
color: #fff;
font-weight: bold;
}
.mainMenu nav ul ul{
display: none;
position: relative;
margin-top: 10px;
background:transparent;
margin-left: 10px;
}
.mainMenu nav ul ul li {
border-radius: 0px;
float: none;
position: relative;
min-width: 135px;
}
.mainMenu nav ul ul li a {
}
.mainMenu nav ul ul ul {
position: relative;
margin-top: 10px;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainMenu">
<nav role='navigation'>
<ul>
<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a href="#">Home</a></li>
<li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10"><a href="#">Dropdown</a>
<ul class="sub-menu">
<li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a href="#">SubMenu</a></li>
<li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16"><a href="http://#">SubMenu</a></li>
<li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a href="http://#">SubMenu</a></li>
<li id="menu-item-109" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-109"><a href="#">SubMenu</a></li>
</ul>
</li>
<li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14"><a href="http://#">Dropdown process</a>
<ul class="sub-menu">
<li id="menu-item-110" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-110"><a href="#">SubMenu</a>
<ul class="sub-menu">
<li id="menu-item-111" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-111"><a href="#">SubMenu</a></li>
</ul>
</li>
<li id="menu-item-114" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-114"><a href="#">SubMenu</a></li>
</ul>
</li>
<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13"><a href="http://#">Menu</a></li>
</ul>
<a class="toggle-nav" href="#"> </a>
</nav>
</div>关于javascript - 触摸友好的下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41676906/