將兩個點擊功能合併爲一個？

我有不同上下文兩次單擊功能 - 一個用於過濾與jQuery的同位素和另一個模仿下拉功能與無序列表的一些元素。將兩個點擊功能合併爲一個？

下拉工作，但由於兩個點擊功能，我必須雙擊列表項來關閉下拉菜單。

有人能幫我把這兩個點擊函數合併成一個嗎？

我有一個可愛的小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'); 
       }); 

      }); 
});

來源

2013-07-09 Alani

不知道我得到它，你想做到這一點 - > http://jsfiddle.net/QVFDv/2/。 ..？ – adeneo

如果返回false，這將防止其他點擊事件的發生。不要返回錯誤。 –

嘗試使用'e.preventDefault（）'而不是'return false;'（您需要將'e'參數添加到您的點擊函數處理程序中） –

你將不得不從$('.filter a').click()事件處理程序刪除return false;。（working jsFiddle）

它削減了所有其他代碼的執行。我建議你使用類似.preventDefault()而不是（我已經更新了的jsfiddle包括這個）。

來源

2013-07-09 20:14:19

如果我想使用多個下拉列表，並使用不同的ID，必須改變腳本？目前只有一個ID（#dd）被使用，我想我必須在一個數組中存儲多個ID，對吧？ – Alani

我認爲加上'VAR DD2 =新的下拉（$（ '＃otherID'））;'文檔中準備處理應該這樣做。 –

[更新的jsfiddle]（http://jsfiddle.net/QVFDv/7/）再次 –

你可以切換第一點擊功能。主動類：

//... 
////////// 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; 
    } 
//...

來源

2013-07-09 20:16:57

將兩個點擊功能合併爲一個？

回答

相關問題