Question

所以我很震惊这不是一个更常见的事情，我搜索了高低，只找到了接近的解决方案。

我需要一个带子菜单的导航菜单，可以通过悬停在桌面上打开，也可以点按手机/平板电脑/触摸

有一些要求，我将使用下面的示例菜单作为参考：

- Home
- About
- - Overview
- - Leadership
- - History
- Contact

要求：

使用鼠标：单击“关于”应打开关于页面。
使用鼠标：将鼠标悬停在“关于”上将打开子菜单。
使用鼠标：鼠标离开导航应关闭子菜单（除非将鼠标悬停在子子菜单上）
触摸：点击“关于”应打开子菜单
触摸：点击“关于”不应该打开关于页面（这就是为什么有一个“概述”页面）。
触摸：点击导航菜单外部应关闭子菜单
触摸：打开时点击“关于”应该关闭子菜单

我说“鼠标”和“触摸”与“桌面”和“移动”的原因是因为我需要考虑具有触摸屏的PC（Surface，Yoga等）。我见过的大多数解决方案都没有考虑到这一点，即使使用鼠标也会使这些设备像触摸屏一样。

我目前的代码目前只在点击时打开菜单，无论设备如何：

$("a.dropdown").click(function() {
  if ($(this).hasClass("open")) {
    $(this).removeClass("open");
    $(this).next("ul").slideUp(100);
    $(this).next("ul").children("li").children("ul").slideUp(100);
    $(this).next("ul").children("li").children("a.dropdown").removeClass("open");
  } else {
    $(this).parent().siblings().children("ul").slideUp(100);
    $(this).parent().siblings().children('a.dropdown').removeClass('open');
    $(this).addClass("open");
    $(this).next("ul").slideDown(100);
  }
});
$('html').click(function() {
  $('.main-nav li ul').slideUp(100);
  $('.main-nav li a.dropdown').removeClass('open');
});
$('.main-nav li').click(function(event) {
  event.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="main-nav">
  <li>
    <a href="/">Home</a>
  </li>
  <li>
    <a href="javascript:void(0)" class="dropdown">About</a>
    <ul>
      <li>
        <a href="/about">Overview</a>
      </li>
      <li>
        <a href="/leadership">Leadership</a>
      </li>
      <li>
        <a href="/history">History</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="/contact">Contact</a>
  </li>
</ul>

导航 - 使用鼠标悬停打开，轻触触摸

0 个答案: