JQuery插件响应菜单

Question

我对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)；

Answer 1

我对响应式导航插件了解不多。但我们需要以不同的方式处理触摸事件。您可以从中包含库http://touchpunch.furf.com用于触摸事件。

如果您只查看上下文菜单，可以尝试使用https://github.com/mar10/jquery-ui-contextmenu.它有处理触摸设备输入的方法。