类样式不适用于iOS

Question

在iPad上查看时， 我们网站的顶部导航栏遇到了一个非常奇怪的问题。 当用户点击“品牌”链接时，应该显示一个下拉菜单，但是没有显示。

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

这些下拉菜单由jQuery悬停时触发的CSS类切换控制。 当以前未点击“部门”链接的用户点击“品牌”链接时，将正确应用该类，但是样式不会以该用户可见的方式应用。 我已经使用Xcode中的设备仿真器以及调试插入到我的计算机中的iPad对此进行了验证。

此外， 在网站的某些页面上 ，下拉菜单似乎可以正常工作。 我很茫然，我看不到这里发生了什么，希望有人能指出我正确的方向。

<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()我所知， is_touch_device()不是jQuery方法。

其次，如果您以移动设备为目标，我猜您想在窗口宽度小于767px时触发这些事件吗？ 如果是这样，则说明您输入了错误的运算符。 看一下这个功能的经过稍微修改和清理的版本，看一下小提琴（在下面链接），然后让我知道你在追求什么：

$(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容器作为控制台来跟踪类切换。 我使用警报来告知您单击功能是否正常运行。

这是小提琴： http : //jsfiddle.net/T8LKu/