2017-12-27 5 views
0

을 클릭 이벤트를 클릭 다시 붕괴 어떤 아이디어? 헤더정렬 가능한 UI 화재가 확장되어 두 번 등등 발사 클릭합니다, 나는 일종의</p> <p>문제가 모바일 브라우저에 클릭을 확장 패널을 무너 내 페이지에 정렬 UI를 jQuery를 사용하고 이벤트를

$('.processHeader').off().on('click', fireExpand); 

에 대한

정렬 가능한 UI

$(".sortable").sortable({ 
     handle: '.portlet-header', 
     sort: function(event, ui) { 
      $(ui.item).find(".processHeader").addClass("dragging"); 
     }, 
     axis: 'y', 
     revert: true, 
     scroll: false, 
     cursor: 'move', 
     helper : 'clone', 
     update: function(event, ui) { 
      ui.item.unbind("click"); 
      ui.item.on("click",function (e) { 
       e.preventDefault(); 
       return false; 
      }); 

     }, 
    placeholder: 'sortable-placeholder', 
     start: function(event, ui) { 
      // $(ui.item).find(".processHeader").addClass("dragging"); 
      ui.placeholder.html(ui.item.html()); 
      ui.item.css("transform", "rotate(1deg)"); 
     }, 
     stop:function (event,ui) { 
      ui.item.css("transform", "rotate(0deg)"); 
     }, 
     // forcePlaceholderSize: true, 

     delay: 350 
}); 

바인딩 클릭 이벤트 확장 기능

fireExpand=function() { 
//   e.preventdefault(); 
      if(!($(this).hasClass('dragging'))){ 
       alert(10); 
       console.log(10); 
       if($(this).hasClass('expanded')){ 

        $($(this).parent()).find('.portlet-body').slideUp('fast'); 
        $(this).removeClass('expanded').addClass('collapsed'); 
        $(this).find(".fa-chevron-up").removeClass('fa-chevron-up').addClass('fa-chevron-down'); 


       } 
       else if($(this).hasClass('collapsed')){ 
        $($(this).parent()).find('.portlet-body').slideDown('fast'); 
        $(this).removeClass('collpased').addClass('expanded'); 
        $(this).find(".fa-chevron-down").removeClass('fa-chevron-down').addClass('fa-chevron-up'); 
       } 
      } 
      else { 
       alert(5); 
      console.log(5); 
       $(this).removeClass('dragging'); 
      } 
     } 

답변

0

나는 그것이 최적이 아니다 알고 있지만 당신이 순서에서는 setTimeout()를 사용하여 시도 않았다 두 번째 클릭을 "무시 하시겠습니까?"

fireExpand=function() { 
     setTimeout(function() { } , 1000) 
     if(!($(this).hasClass('dragging'))){ 
      alert(10); 
      console.log(10); 
      if($(this).hasClass('expanded')){ 

       $($(this).parent()).find('.portlet-body').slideUp('fast'); 
       $(this).removeClass('expanded').addClass('collapsed'); 
       $(this).find(".fa-chevron-up").removeClass('fa-chevron-up').addClass('fa-chevron-down'); 


      } 
      else if($(this).hasClass('collapsed')){ 
       $($(this).parent()).find('.portlet-body').slideDown('fast'); 
       $(this).removeClass('collpased').addClass('expanded'); 
       $(this).find(".fa-chevron-down").removeClass('fa-chevron-down').addClass('fa-chevron-up'); 
      } 
     } 
     else { 
      alert(5); 
     console.log(5); 
      $(this).removeClass('dragging'); 
     } 
    } 

종류와 관련,

CHARALAMPOS

관련 문제