3

我们在 iPad 上遇到悬停状态和 CSS 菜单的常见问题。因为它不识别悬停状态，所以不允许选择。

我们已经尝试了大多数常见的解决方法，比如onClick="return true"使用 jQuery 创建一个动态悬停类来复制 :hover 和其他一些，我现在已经删除了它们以清理代码。我敢肯定我们遗漏了一些应该很明显的东西。

任何为我指明正确方向的帮助将不胜感激。

链接：iar.suissamesser.com

4

5 回答 5

3

您应该在这里查看示例http://www.hnldesign.nl/work/code/mouseover-hover-on-touch-devices-using-jquery/

从那里开始很简单。祝你好运，

于 2013-06-21T16:50:38.713 回答
3

我假设您在谈论菜单，对吗？在这种情况下，我所做的是在我的 css:hover选择器中添加另一行。这个想法是这样的，在点击时，将一个类添加到#navlike ' btn1。这还需要您向列表项添加一个类。
CSS

#nav li:hover > ul,
#nav.btn1 li.btn1 > ul {
    display: block;
}

HTML

<ul class="clearfix btn1" id="nav">
  <li class="btn1"><a href="http://iar.suissamesser.com/about-us/campus">ABOUT US</a><br />
    <ul>
      <li><a href="http://iar.suissamesser.com/about-us/campus">Campus</a></li>
      <li><a href="http://iar.suissamesser.com/about-us/history-mission">History &amp; Mission</a></li>
    </ul>
  </li>
  <li class="btn2"><a href="http://iar.suissamesser.com/parents/accreditation-and-licenses" >PARENTS</a><br />
    <ul>
      <li><a href="http://iar.suissamesser.com/parents/accreditation-and-licenses">Accreditation and Licenses</a></li>

JS

$("#nav > li > a").on("click", toggleNav);
var toggleNav = function(evt){
  var clicked = $(this).parent().attr('class');
  $("#nav").removeClass("btn1 btn2 btn3 btn4 ...").addClass(clicked);
  evt.preventDefault();
}
于 2013-06-21T16:56:11.707 回答
0

这是迟到的迟到的回应，但是。

您实际上不必使用任何类型的 jquery 或代码，您只需要混淆或覆盖 css 中的 ipad 逻辑。

在你的 CSS 中试试这个

.navigation li ul
{
display:none;
}
.navigation li:hover ul
{
display:block;  
}
.navigation > li:hover
{
background-color:#000;  
}

据我了解，这会阻止 ipad 级联到 li 并且您点击 a href 因为您在 li 上进行了悬停，但是，当子菜单打开时，a 成为下一个响应者，因为 li 已经具有悬停状态积极的。

这是偶然发现的。

html会是这样的

<ul class="navigation">
<li><a href="http://www.google.com">test link</a>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
<li><a href="#www.google.com">test link</a>
<li><a href="#www.google.com">test link</a>
</ul>
于 2015-03-05T16:15:27.717 回答
0

在页脚文件中包含以下代码

$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) {
e.stopPropagation();
}
于 2013-12-04T08:40:59.420 回答
0

我已经能够在没有 Javascript 的情况下让它工作得很好。

CSS的关键部分：

/* hide submenu by default */
.nav .submenu {
  display: none; 
}
/* show submenu on :hover and :focus-within */
.nav li:hover .submenu, .nav li:focus-within .submenu {
  display: block; 
}

要:hover在 iPad 上正常工作，您需要将 a 添加tabindex到您的顶级菜单项：

<ul class="nav">
  <li tabindex="0">
    Menu Item
    <ul class="submenu">
      <li>...</li>
    </ul>
  </li>
</ul>

然后为了能够关闭菜单，您还需要在<body>标签中添加一个 tabindex：

<body tabindex="0">

这种方法的好处是它还允许键盘导航，并且有利于可访问性。

于 2021-09-17T15:20:37.843 回答