如何编辑 jQuery.mmenu.js 以允许定位类（不仅是 ID）？答案

【问题标题】：How do I edit jQuery.mmenu.js to allow classes (not only IDs) to be targeted?如何编辑 jQuery.mmenu.js 以允许定位类（不仅是 ID）？
【发布时间】：2013-08-19 23:28:23
【问题描述】：

我正在开发一个移动网站，我想在 div 下显示隐藏的子菜单，例如 Twitter 的移动网站（滑动推文以显示其他选项）。我真的很喜欢jQuery.mmenu.js 插件中的界面，但它仅限于目标ID，我需要定位类。

我确定这是 Fred 设置的，这意味着理论上可以更改。

代码都可以在这里下载：http://mmenu.frebsite.nl/

PS。根据 Fred 的联系要求，这篇文章主要是针对 Fred 的，但如果有人能想到解决方案，我很乐意尝试。

【问题讨论】：

非常酷的插件，但 Fred 是谁？
他是插件的创建者。我在网站的某个地方看到了他的名字。
将来，您可能不想在此处直接向特定人员提问。例如，在 Stack Overflow 上有大约 2400 人的名字中带有“Fred”。不过，看起来你选对了。
完全明白。在他的插件页面上，他要求任何技术支持的电子邮件都附有 Stack Overflow 链接，因此如果他收到重复的问题，他可以将提问者推荐给该链接。我只是按照他的要求。

标签： jquery mmenu

【解决方案1】：

你可以把它包装起来：

$('.classSelector').each(function(){
   $('#'+this.id).mmenu();
});

...ofc，具有该类的每个对象都需要有一个 id...

如果您不想在 html 中为它们提供 id，请执行以下操作：

var menuCtr = 0;

$('.classSelector').each(function(){
   if(this.id == ''){
     this.id = 'my_mmenu_'+ menuCtr++;
   }
   $('#'+this.id).mmenu();
});

【讨论】：

【解决方案2】：

这应该也可以：

$('.classSelector').mmenu();

唯一真正的问题是插件将拖动事件绑定到“页面”。因此，通过在页面上拖动打开菜单仅限于每个方向（“左”、“右”、“上”、“下”）一个菜单。

我想更改插件会相对容易，因此它可以将拖动事件绑定到指定元素（通过配置）并回退到“页面”。在官方插件实现之前，可以这样尝试：

for ( var a = 0; a < 10; a++ )
{
    $(".menu" + a).mmenu({
        dragOpen :{
            open: true,
            pageNode: $(".tweet" + a)
        }
    });
}

打开未缩小的 jquery.mmenu.js 文件，转到 $.fn.mmenu.dragOpen 方法（第 454 行）并添加：

var $dragNode = ( opts.pageNode && opts.pageNode instanceof $ ) ? opts.pageNode : $page;

转到第 530 行并更改：

$page.hammer()

进入

$dragNode.hammer()

我认为这应该可以解决问题。

【讨论】：

我已经搞定了。当我添加 for 循环时，菜单总是打开的，但是当我删除循环时，整个页面都会拖过来。我希望将子菜单添加到各个 div。作为参考，在 1:38 这个视频完全符合我的要求：youtu.be/PeQxOzE6e_8?t=1m38s
不支持 1:38 视频中的行为（仅移出部分页面），因为：a) 插件总是将整个页面移出 b) 菜单将始终为 100 % 高。
也许它是一个可以在未来某个时候添加的功能？ :D