为什么我必须单击列表项两次以使效果起作用？

Question

我正在使用两个插件：Isotope和来自Codrops的自定义样式插件http://tympanus.net/Tutorials/CustomDropDownListStyling/index3.html

一切正常，但我必须单击两次下拉项才能使效果正常。

这里是带有jsFiddle的jQuery，我正在处理它。

$(function(){
   /*isotope filtering*/ 
    var $container = $('#container'),
        filters = {};

    $container.isotope({
      itemSelector : '.main-element',
      masonry: {
        columnWidth: 80
      }
    });

    // filter buttons
    $('.dropdown 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.trainability = 'low'
      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;
    });

 /*CUSTOM DROP-DOWN LIST STYLING*/   

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-3').removeClass('active');
                });

                var dd = new DropDown( $('#ee') );

                $(document).click(function() {
                    // all dropdowns
                    $('.wrapper-dropdown-3').removeClass('active');
                });

            });     
     });

http://jsfiddle.net/mcnutty757/pJu79/12/

Answer 1

我确实更新了小提琴检查here

问题在于初始化..

 $this.placeholder.text(this.val);