触摸友好的下拉菜单答案

【问题标题】：touch friendly dropdown menu触摸友好的下拉菜单
【发布时间】：2017-01-16 12:54:46
【问题描述】：

我正在尝试制作一个触摸友好的下拉菜单，但不知道如何做。这是我到目前为止所拥有的：

<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菜单。如何确保当用户单击下拉链接时，他们不会被重定向到该页面，而是打开下拉菜单。如果他们再次点击该链接，那么他们将被重定向。

【问题讨论】：

我想你想用 Javascript/jQuery 做这个？如果是这样，我将使用 javascript 更改打开菜单的类并使用 event.preventDefault() 仅针对关闭的菜单类。
我不太擅长javascript。如果有儿童，我想阻止打开链接。所以在这种情况下，我想阻止下拉链接在第一次点击时打开。我确实读过有关 touchstart 的信息，但不确定它是如何工作的。

标签： javascript jquery html css wordpress

【解决方案1】：

第一次点击 - 打开，第二次 - 重定向。但是隐藏子菜单呢？

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>

【讨论】：

谢谢！！这正是我所需要的。有没有办法只显示一个下拉菜单打开？如果打开了 dropdown01 并且我打开了 dropdown02 那么 dropdown01 应该关闭。这可能吗？
切换下拉菜单也是一个不错的功能。
谢谢！像魅力一样工作！

【解决方案2】：

您可以使用 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;
}

【讨论】：