2014-01-05 3 views
0

Я довольно новичок в jquery, и я пытаюсь научиться эффективно использовать его на веб-сайте. Я работаю над гибким навигационным плагином, который я нашел в Интернете. Моя проблема с плагином заключается в том, что выпадающее меню работает, но когда оно переходит на мобильный, стрелка, которая активирует раскрывающееся меню, не работает. Теперь я не знаю, правильно ли я запускаю скрипт или что не так с скриптом jquery. Может ли кто-нибудь быть любезным, чтобы помочь и, возможно, объяснить, почему все работает или не работает. Благодаря!JQuery плагин отзывчивое меню

<nav class="nav"> 
    <ul class="nav-list"> 
     <li class="nav-item"> 
      <a href="#">HOME</a> 
     </li> 
     <li class="nav-item"> 
      <a href="#">PORTFOLIO</a> 
      <ul class="nav-submenu"> 
       <li class="nav-submenu-item"> 
        <a href="#">STUDIO</a> 
       </li> 
       <li class="nav-submenu-item"> 
        <a href="#">PORTRAITS</a> 
       </li> 
       <li class="nav-submenu-item"> 
        <a href="#">SPORTS</a> 
       </li> 
       <li class="nav-submenu-item"> 
        <a href="#">WEDDING</a> 
       </li> 
     <li class="nav-submenu-item"> 
        <a href="#">ADVENTURE</a> 
       </li> 
      </ul> 
     </li> 
     <li class="nav-item"> 
      <a href="#">ABOUT</a> 
     </li> 
     <li class="nav-item"> 
      <a href="#">NEWS</a> 
     </li> 
     <li class="nav-item"> 
      <a href="#">CONTACT</a> 
     </li> 
    </ul> 
</nav> 

Jquery

; (функция ($) {

// DOM ready 
$(function() { 

    // Append the mobile icon nav 
    $('.nav').append($('<div class="nav-mobile"></div>')); 

    // Add a <span> to every .nav-item that has a <ul> inside 
    $('.nav-item').has('ul').prepend('<span class="nav-click"><i class="nav-arrow"></i></span>'); 

    // Click to reveal the nav 
    $('.nav-mobile').click(function(){ 
     $('.nav-list').toggle(); 
    }); 

    // Dynamic binding to on 'click' 
    $('.nav-list').on('click', '.nav-click', function(){ 

     // Toggle the nested nav 
     $(this).siblings('.nav-submenu').toggle(); 

     // Toggle the arrow using CSS3 transforms 
     $(this).children('.nav-arrow').toggleClass('nav-rotate'); 

    }); 

}); 

}) (Jquery);

ответ

0

Я действительно мало знаю о адаптивном навигационном подключаемом модуле. Но нам нужно обрабатывать события касания по-разному. Вы можете просто включить библиотеку от http://touchpunch.furf.com для событий касания.

Если вы ищете только контекстное меню, вы можете попробовать использовать https://github.com/mar10/jquery-ui-contextmenu. Он имеет способы обработки входов сенсорных устройств.

Смежные вопросы