Javascript 将两个单击功能合并为一个?
我有两个来自不同上下文的click函数——一个是用jquery过滤一些元素,另一个是用无序列表模拟下拉功能 下拉菜单可以工作,但由于有两个单击功能,我必须双击列表项才能关闭下拉菜单 有人能帮我把这两个点击功能合并成一个吗 我有一个漂亮的小和预览脚本:Javascript 将两个单击功能合并为一个?,javascript,jquery,Javascript,Jquery,我有两个来自不同上下文的click函数——一个是用jquery过滤一些元素,另一个是用无序列表模拟下拉功能 下拉菜单可以工作,但由于有两个单击功能,我必须双击列表项才能关闭下拉菜单 有人能帮我把这两个点击功能合并成一个吗 我有一个漂亮的小和预览脚本: $(function(){ var $container = $('#container'), filters = {}; $container.isotope({ itemSelector: '.
$(function(){
var $container = $('#container'),
filters = {};
$container.isotope({
itemSelector: '.item',
filter: '',
layoutMode: 'masonry',
animationEngine: 'css',
containerStyle: {
position: 'relative',
overflow: 'hidden'
},
animationOptions: {
duration: 2500,
easing: 'linear',
queue: false
}
});
////////// first click function: filter links
$('.filter a').click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return;
}
var $optionSet = $this.parents('.option-set');
// change selected class
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// store filter value in object
// i.e. filters.color = 'red'
var group = $optionSet.attr('data-filter-group');
filters[ group ] = $this.attr('data-filter-value');
// convert object into array
var isoFilters = [];
for ( var prop in filters ) {
isoFilters.push( filters[ prop ] )
}
var selector = isoFilters.join('');
$container.isotope({ filter: selector });
return false;
});
////////// Second Click function for faux Dropdown (replace span)
function DropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.dropdown > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
return false;
});
obj.opts.on('click',function(){
var opt = $(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}
$(function() {
var dd = new DropDown( $('#dd') );
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown').removeClass('active');
});
});
});
您必须删除
返回false代码>从$('.filter a')。单击()
事件处理程序。()
它正在削减所有其他代码的执行。我建议您改用类似的方法(我已经更新了JSFIDLE以包含此内容)。您可以在first click函数中切换.active类:
//...
////////// first click function: filter links
$('.filter a').click(function(){
$('.wrapper-dropdown').toggleClass('active'); // Added this!
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return;
}
//...
我不确定我是否明白,你是想这么做->?如果返回false,将阻止另一个click事件的发生。不要返回false。尝试e.preventDefault()
而不是返回false
(您需要将e
参数添加到单击函数处理程序中)如果我想使用多个具有不同ID的下拉列表,我必须如何更改脚本?目前只使用了一个ID(#dd),我想我必须在一个数组中存储多个ID,对吗?我认为添加var dd2=new下拉列表($('#otherID'))代码>在您的文档就绪处理程序中应该可以。再次感谢,两个下拉列表都可以工作,但过滤器功能现在已损坏,它应该是一个组合过滤器。当我选择一块地和一种类型时,我得到了正确的结果。但当我为类型选择“any”时,所有过滤器选项都会被设置回原位,它也会显示任何焊盘,但我首先选择的焊盘应保持活动状态。我想用它来聊天,解释一下这些变化