タッチフレンドリーなドロップダウンメニューを作成しようとしていますが、方法がわかりません。 これが私がこれまでに持っているものです：
<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/
ワードプレスメニューです。 ユーザーがドロップダウンリンクをクリックしたときに、そのページにリダイレクトされないが、ドロップダウンが開かれるようにするにはどうすればよいですか。そのリンクをもう一度クリックすると、リダイレクトされます。
回答：
回答№1は1最初にクリック-開く、2番目-リダイレクト。 しかし、非表示サブメニューはどうですか？
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>回答№2の場合は0
HTMLを使用できます <button> 代わりに <a> CSSを使用して非表示にします <ul>：
ul.sub-menu {
display: none;
}
button:focus + ul.sub-menu, ul.sub-menu:hover {
display: block;
}
その後、JSを介してボタンの動作を修正できます。 （モバイル向けに最適化し、フォーカスがある場合はクリックしてリンクを開くなど）
編集：
を非表示にすることもできます <button> フォーカスがある場合は、「ドロップダウン」リンクを次のように追加します <a> 〜に <ul> 未満。これは、基本バージョンのJSを必要としません。
button:focus {
display: none;
}