多下拉式点击问题

Question

我有一个backbone.js应用程序，看起来像：http://jsfiddle.net/TD9Wj/。

如果我使用Dropit.js的默认代码，一切都可以正常工作。但我正试着让代码在点击触发器时关闭。因此，当您单击“菜单”时，下拉菜单应该会关闭。

所以我使用了对代码的拉请求更新(https://github.com/gilbitron/Dropit/pull/5/files)

它改变了：

if($(this).parents(settings.triggerParentEl).hasClass('dropit-open')) return false;

至：

if($(this).parents(settings.triggerParentEl).hasClass('dropit-open')) {
   $('.dropit-open').removeClass('dropit-open').find('.dropit-submenu').hide();
   return false;
}

这允许我点击“菜单”触发器和下拉菜单将关闭。不幸的是，当我这样做，如果我有多个StoreProductViews打开，只有第一个添加的将有DropIt菜单的功能。

Answer 1

基本上，您的问题是由多个事件绑定引起的。换句话说，每次呈现StoreProductView实例时，都会将.dropit()方法应用于页面上的所有.menu项。

考虑在代码中进行以下更改：

1. 将$('.menu').dropit(); (第71行)更改为this.$('.menu').dropit();或this.$el.find('.menu').dropit(); (应该是相同的，只是语法不同)。这将使视图查找它包含的.menu元素，而不是查看整个文档。
2. 以上的更改是不够的，因为所有StoreProductView的元素都是相同的，所以下面的内容也是必要的。而不是使用： var storeProductView = new StoreProductView({ el: $('#widgets') }); 试着做这样的事情： var storeProductView = new StoreProductView(); $('#widgets').append(storeProductView.$el);

希望它有帮助，请询问是否有什么不清楚。