Question

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

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

这些下拉菜单是通过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方面没有任何关系。我在我的iPad上再次测试了Javascript被禁用（我有效果：hover作为no-js后备）并且同样的怪异行为仍然存在。在您点击“部门”菜单后，“品牌”菜单才会生效。

Answer 1

好吧，目前还不清楚你要做什么，但我想我得到了要点，我会在我们去的时候编辑我的答案。

首先，此处未定义viewWidth，因此无法使用，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/

类型样式不适用于iOS

1 个答案: