jquery - 类样式不适用于 iOS

Question

我在使用 our site's 时遇到了一个相当奇怪的问题在 iPad 上查看时的顶部导航栏。当用户点击“品牌”链接时，应该会显示一个下拉菜单，但实际上并没有。

当用户点击“部门”链接时，相应的下拉菜单会正确显示，如果用户随后点击“品牌”链接，则下拉菜单会正确显示。

这些下拉菜单是通过 jQuery 在悬停时触发的 CSS 类切换来控制的。当之前未点击“部门”链接的用户点击“品牌”链接时，将正确应用类，但不会以用户可见的方式应用样式。我已经使用 Xcode 中的设备模拟器以及调试插入我机器的 iPad 验证了这一点。

此外，on certain pages of the site ，下拉菜单似乎工作正常。我很茫然，我看不到这里发生了什么，我希望有人能指出我正确的方向。

<style>

.tab {
    position: absolute;
    left: 0;
    height: 0;
    overflow: hidden;
    display: block;
    visibility: hidden;
    margin: 1px 0 0 0;
    background: #efefef;
    background: rgba(255,255,255,0.95);
    opacity: 0;
    transition: 0.2s;
}

.drop.active .tab {
    visibility: visible;
    z-index: 20;
    height: auto;
    overflow: visible;
    opacity: 1;
}

</style>

<nav id="nav" class="sixteen columns main-menu new">
    <ul id="tab-nav" class="new-nav">
    <li><a href="/collections/new-arrivals">New Arrivals</a></li>
    <li class="drop">
        <a href="/pages/designer-list">Brands</a>
        <div class="tab">
            <!-- SUBMENU CONTENT -->
        </div>
    </li>
    <li class="drop">
        <a href="/collections/all">Departments</a>
        <div class="tab">
            <!-- SUBMENU CONTENT -->
        </div>
    </li>
    <li><a href="/blogs/the-look">The Look</a></li>
    <li><a href="/blogs/news">News</a></li>
    <li class="mobileonly"><a href="/search">Search</a></li>
</ul>
</nav>

<script>
    // Tab Nav Toggle
    $(document).ready(function(){
      if ( viewWidth > 767 && is_touch_device() ) {
        $('.main-menu li.drop').hover(
          function() {
            $(this).find('a').first().click(function(e) {
              e.preventDefault();
            });
            $(this).toggleClass('active');
          }
        );
      } else if ( viewWidth > 767 &! is_touch_device() ) {
        $('.main-menu li.drop').hover(
          function() {
            $(this).toggleClass('active');
          }
        );
      }
    });
</script>

我又看了一眼，这个问题似乎与 javascript 方面没有任何关系。我在禁用 Javascript 的 iPad 上再次测试(我将效果应用 :hover 作为 no-js 回退)并且同样的奇怪行为仍然存在。在您点击“部门菜单”之前，“品牌”菜单不起作用。

Answer 1

好的，您并不清楚您要做什么，但我想我明白了要点，我会在进行时编辑我的答案。

首先，viewWidth 未在此处定义，因此无法使用，并且据我所知，is_touch_device() 不是 jQuery 方法.

其次，如果您的目标是移动设备，我猜您想在窗口宽度小于 767px 时触发这些事件？如果是这样，你找错了运算符(operator)。看看这个经过稍微修改和清理的函数版本，看看 fiddle (链接如下)，如果这就是您想要的，请告诉我:

$(document).ready(function(){
    $('li.drop').hover(function() {
        var width = $(window).width();
        if ( width <= 596 ) {
            $(this).toggleClass('active');
            $('.tab').text("The parent list of the link whose text reads, '" + $(this).find('a').text() + "' now has the class, '" + $(this).attr('class') + "'.");
        }
    });

    $('li.drop').find('a').click(function(e) {
        e.preventDefault();
        alert("You have clicked the '" + $(this).text() + "' link.");
     });
});

有几点需要注意:

我将目标宽度更改为 596，因为这是 JSFiddle 窗口的默认宽度。我将您的 .tab 容器用作一种控制台来跟踪类切换。我使用警报让您知道点击功能正常工作。

这是 fiddle :http://jsfiddle.net/T8LKu/