2013-05-26 63 views
2

我使用两个插件:同位素和自定义样式插件从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/

回答

0

我做了更新小提琴检查here

的问题是在初始化..

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

看起来不错。谢谢! – user2421385

+0

请不要要求人们投票/接受你的答案。 [详细信息请参阅此元帖子](http://meta.stackexchange.com/q/167155/152134)。谢谢! –

相关问题