Блог

Я столкнулся с довольно странной проблемой с верхней панелью навигации нашего сайта при просмотре на iPad. Когда пользователь нажимает на ссылку «Бренды», должно отображаться выпадающее меню, но это не так.

Когда пользователь нажимает на ссылку «Отделы», соответствующее выпадающее меню отображается правильно, и если пользователь впоследствии нажимает на ссылку «Бренды», выпадающее меню отображается правильно.

Управление этими выпадающими меню осуществляется с помощью переключателей классов CSS, запускаемых jQuery при наведении курсора мыши. Когда пользователь, который ранее не нажимал на ссылку «Отделы», нажимает на ссылку «Бренды», класс применяется правильно, однако стили применяются не так, чтобы это было видно пользователю. Я проверил это с помощью эмулятора устройства в 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 amp;amp; 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 amp;! is_touch_device() ) {
        $('.main-menu li.drop').hover(
          function() {
            $(this).toggleClass('active');
          }
        );
      }
    });
</script>
  

Я взглянул еще раз, и проблема, похоже, не имеет ничего общего с javascript. Я снова протестировал на своем iPad с отключенным Javascript (у меня есть эффект, применяемый с помощью:hover в качестве резервного варианта без js), и то же странное поведение сохраняется. Меню «Бренды» не работает до тех пор, пока вы не нажмете на меню «Отделы».

Хорошо, не совсем понятно, что вы пытаетесь сделать, но я думаю, что я понял суть, и я отредактирую свой ответ по ходу дела.

Во-первых, 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 /