Pourquoi dois-je cliquer deux fois sur l'élément de la liste pour que l'effet fonctionne ?

Question

J'utilise deux plugins : Isotope et un Custom Styling Plugin de Codrops. http://tympanus.net/Tutorials/CustomDropDownListStyling/index3.html

Tout fonctionne bien, sauf que je dois cliquer deux fois sur l'élément de la liste déroulante pour que l'effet voulu se produise.

Voici le jQuery avec un jsFiddle de ce sur quoi je travaille.

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

J'ai mis à jour la vérification de la procédure aquí

Le problème se situe au niveau de l'initialisation .

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