android - 下拉菜单在移动设备上不起作用

Question

我有一个简单的下拉菜单，但在移动设备上无法正常工作。它在桌面上运行良好，当我悬停它时它会向下滑动菜单，当我将鼠标移出时它会隐藏，但是在 IOS 或 android 中当我点击菜单项时它会显示子菜单，但即使我点击它也会保持这种状态父项。

理想情况下应该是:点击打开菜单，再次点击父项 - 关闭菜单。

html:

<ul class="acc-menu">
  <li class="parent">
    <a href="#"><span>Account</span></a>
    <ul>
      <li class=""><a href="#">Link 1</a></li>
      <li class=""><a href="#">Link 2</a></li>
      <li class=""><a href="#">Link 3</a></li>
      <li class=""><a href="#">Link 4</a></li>
      <li class=""><a href="#">Link 5</a></li>
    </ul>
  </li>
</ul>

CSS:

.acc-menu {
  margin-top: -6px;
  padding: 0;
  list-style: none;
}

.parent span {
  letter-spacing: 3px;
}

.acc-menu li {
  float: left;
  display: block;
  background: #fff;
  position: relative;
  z-index: 500;
  margin: 0 1px;
}

.acc-menu li a {
  display: block;
  line-height: 18px;
  color: #333;
  text-align: left;
}

.acc-menu ul {
  position: absolute;
  left: -14px;
  display: none;
  margin: 0 0 0 -1px;
  padding: 0;
  list-style: none;
  text-indent: 10px;
}

.acc-menu ul li {
  width: 150px;
  float: left;
}

.acc-menu ul a {
  display: block;
  padding: 8px 5px;
}

.acc-menu ul a:hover {
  text-decoration: underline;
}

jq:

jQuery('.acc-menu li').hover(
  function() {
    jQuery('ul', this).stop().slideDown(100);
  },
  function() {
    jQuery('ul', this).stop().slideUp(100);
  }
);

Here is the codepen link

Answer 1

悬停在移动设备上效果不佳。您可以尝试为移动设备添加一个带有 toggleClass() 事件的 click 监听器，并将传统的悬停留在桌面上:

• 使用 display: block;
将 .display 类添加到您的 CSS
• 使用 toggleClass("display"); 将 .on("click") 监听器附加到 ul 上 如果视口(viewport)宽度等于或小于 414px(请随意调整视口(viewport)宽度值以达到您的利益)。

编辑(基于评论):

• 设置 :hover through @media query only for desktop, left click listener for mobile via jQuery.

Test it resizing viewport here. First resize it, then run the code and try to either hover or click.(UPDATED)

var viewport = $(window).width();
if (viewport <= 414) {
  jQuery('.acc-menu').on("click", function() {
    jQuery('ul').toggleClass("display");
  });
}

.acc-menu {
  margin-top: -6px;
  padding: 0;
  list-style: none;
}
.parent span {
  letter-spacing: 3px;
}
.acc-menu li {
  float: left;
  display: block;
  background: #fff;
  position: relative;
  z-index: 500;
  margin: 0 1px;
}
.acc-menu li a {
  display: block;
  line-height: 18px;
  color: #333;
  text-align: left;
}
.acc-menu ul {
  position: absolute;
  left: -14px;
  display: none;
  margin: 0 0 0 -1px;
  padding: 0;
  list-style: none;
  text-indent: 10px;
}
.acc-menu ul.display {
  display: block;
}
.acc-menu ul li {
  width: 150px;
  float: left;
}
.acc-menu ul a {
  display: block;
  padding: 8px 5px;
}
.acc-menu ul a:hover {
  text-decoration: underline;
}
@media (min-width: 415px) {
    .acc-menu li:hover ul {
        display: block;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul class="acc-menu">
  <li class="parent">
    <a href="#"><span>Account</span></a>
    <ul>
      <li class=""><a href="#">Link 1</a>
      </li>
      <li class=""><a href="#">Link 2</a>
      </li>
      <li class=""><a href="#">Link 3</a>
      </li>
      <li class=""><a href="#">Link 4</a>
      </li>
      <li class=""><a href="#">Link 5</a>
      </li>
    </ul>
  </li>
</ul>