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

哈弗在移动设备上玩得不好。您可以尝试为移动设备添加click监听器和toggleClass()事件，并将常规悬停保留在桌面上：

使用.display

display: block;

如果视口宽度等于或低于.on("click")，请toggleClass("display"); ul仅{/ 1}}仅{/ 1>} } 414px，{随意调整视口宽度值为了你的利益）。

编辑（基于评论）：

仅针对桌面设置:hover至@media查询，并通过jQuery设置左移动侦听器。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用UIToolbar纯粹使用CSS。

＆＃13;

:hover

＆＃13;

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

＆＃13;

Answer 3

为什么不在悬停的

之外添加点击事件

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

Pen

下拉菜单不适用于移动设备

3 个答案: