将两个点击功能合二为一？答案

【问题标题】：Combining two click functions into one?将两个点击功能合二为一？
【发布时间】：2013-07-07 14:08:07
【问题描述】：

我有两个来自不同上下文的点击功能 - 一个用 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');
                });

            });
});

【问题讨论】：

不知道我明白了，你想这样做 -> jsfiddle.net/QVFDv/2 ... ?
如果你返回false，它将阻止其他点击事件的发生。不要返回 false。
尝试e.preventDefault() 而不是return false;（您需要将e 参数添加到您的点击函数处理程序）

标签： javascript jquery

【解决方案1】：

您必须从您的 $('.filter a').click() 事件处理程序中删除 return false;。 (working jsFiddle)

它正在切断所有其他代码的执行。我建议您改用 .preventDefault() 之类的东西（我已经更新了 jsFiddle 以包含它）。

【讨论】：

如果我想使用多个具有不同 ID 的下拉菜单，我该如何更改脚本？目前只使用了一个 ID (#dd)，我想我必须将多个 ID 存储在一个数组中，对吧？
我认为在您的文档就绪处理程序中添加 var dd2 = new DropDown( $('#otherID') ); 应该可以做到这一点。
再次感谢，两个下拉菜单都可以工作，但过滤器功能现在坏了，它应该是一个组合过滤器。当我选择土地和类型时，我会得到正确的结果。但是，当我为类型选择“任何”时，所有过滤器选项都被重新设置，然后它也会显示任何土地，但我首先选择的土地应该保持活动状态。 jsfiddle
Here's the fully working jsFiddle。我想用它聊天来解释这些变化。
让我们continue this discussion in chat

【解决方案2】：

您可以在第一次点击功能中切换 .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;
  }
 //...

【讨论】：