多个下拉单击问题

Question

我有一个看起来像http://jsfiddle.net/TD9Wj/。

的backbone.js应用

如果我使用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);

希望它有所帮助，请询问是否有不明确的事情。