我有两个来自不同上下文的点击功能——一个用 jquery isotope 过滤一些元素,另一个用无序列表模拟下拉功能。
下拉菜单有效,但由于有两个单击功能,我必须双击列表项以关闭下拉菜单。
有人可以帮我将这两个点击功能合二为一吗?
我有一个不错的小jsfiddle和预览脚本:
$(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');
});
});
});