두 개의 클릭 기능을 하나로 결합 했습니까?

Question

다른 컨텍스트에서 두 개의 클릭 기능이 있습니다. 하나는 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'); 
       }); 

      }); 
}); 

Answer 1

당신은 당신의 $('.filter a').click() 이벤트 처리기에서 return false;을 제거해야합니다. (working jsFiddle)

다른 모든 코드의 실행을 차단합니다. 대신 .preventDefault()과 같은 것을 사용하는 것이 좋습니다 (jsFiddle을 포함하도록 업데이트했습니다).

Answer 2

당신은 첫 번째 클릭 기능에 .active는 클래스를 전환 할 수 있습니다 : 당신이 일을하려고하는, 그것을 얻을

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