類樣式不適用於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/