Question

我正在尝试制作一个触摸友好的下拉菜单，但不知道该怎么做。以下是我到目前为止的情况：

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

Answer 1

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

＆＃13;

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();
})

＆＃13;

.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;
    }

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用HTML <button>代替<a>并使用CSS隐藏<ul>：

ul.sub-menu {
    display: none;
}

button:focus + ul.sub-menu, ul.sub-menu:hover {
    display: block;
}

之后您可以通过JS修复按钮行为。（优化移动设备，点击时打开链接，如果有焦点等）。

编辑：

如果它有焦点，你也可以隐藏<button>并添加＆＃34; Dropdown＆＃34;将<a>链接到下面的<ul>。对于基本版本，这不需要JS。

button:focus {
    display: none;
}

触摸友好下拉菜单

2 个答案: