Class styles are not applied in iOS

Question

I've encountered a rather strange issue with our site's top navigation bar when viewed on an iPad. When a user taps on the "Brands" link, a drop-down menu should be shown, but it is not.

When a user taps on the "Departments" link the corresponding drop-down menu is shown properly and if the user subsequently taps on the "Brands" link the drop-down menu displays properly.

These drop-down menus are controlled via CSS class toggles triggered on hover by jQuery. When a user who hasn't previously tapped on the "Departments" link taps on the "Brands" link the class is applied correctly, however the styles aren't applied in a way that's visible to the user. I have verified this with the device emulator in Xcode as well as by debugging an iPad plugged in to my machine.

Additionally, on certain pages of the site , the drop-downs seem to work fine. I'm at a loss, I can't see what's going on here and I hope someone might point me in the right direction.

<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>

I took another look and the issue doesn't seem to have anything to do with the javascript side of things. I tested again on my iPad with Javascript disabled (I have the effect applied with :hover as a no-js fallback) and the same weird behaviour persists. The "Brands" menu doesn't work until after you've tapped on the "Departments menu.

Answer 1

Okay, it's not precisely clear what you're trying to do, but I think I get the gist, and I'll edit my answer as we go.

First, viewWidth is not defined here, and so can't be used, and is_touch_device() is not, to the best of my knowledge, a jQuery method.

Second, if you're targeting mobile devices, I'm guessing you want to fire these events when the window width is LESS THAN 767px ? If so, you've got the wrong operator. Take a look at this slightly modified and cleaned up version of your function, and take a look at the fiddle (linked below), and let me know if that's what you're after:

$(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.");
     });
});

A couple things to note:

I changed our target width to 596 because that's the default width of the JSFiddle window. I used your .tab container as sort of a console to keep track of the class toggles. I used alerts to let you know the click function is working properly.

Here's the fiddle: http://jsfiddle.net/T8LKu/