爲什麼我必須點擊列表項兩次以使效果起作用？

Question

我使用兩個插件：同位素和自定義樣式插件從Codrops http://tympanus.net/Tutorials/CustomDropDownListStyling/index3.html

一切正常，只是我必須點擊下拉項兩次正確的效果很好地工作。

這裏的jQuery與我工作的jsFiddle。

$(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);