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

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

这是codepen链接

Answer 1

悬停在手机上的播放效果不佳。 您可以尝试为移动设备添加带有toggleClass()事件的click侦听器，并将常规悬停在桌面上：

• 使用display: block;将.display类添加到您的CSS中display: block;
• 将.on("click")侦听器附加到toggleClass("display"); 仅当ul视口宽度等于或小于414px （随意调整视口宽度值以使您受益）。

编辑（基于注释）：

• 通过@media查询仅在桌面上设置:hover ，并通过jQuery在移动设备上单击鼠标左键。

在此处测试其调整视口大小。 首先调整其大小，然后运行代码并尝试将鼠标悬停或单击。（已更新）

 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> 

Answer 2

您可以使用:hover完全通过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; } li:hover ul { display: block; } 

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

Answer 3

您为什么不简单地将鼠标悬停在click事件之外呢？

jQuery('.acc-menu li').on('click',
  function() {
    jQuery('ul', this).stop().slideToggle(100);
  }
);

钢笔