jquery를 사용하여 클릭을 사용 또는 사용 중지합니다.

Question

나는 클릭 할 수있는 속성이있는 네 개의 버튼이 있습니다. 버튼을 클릭하면 div가 아래로 내려 가고 같은 div에서 다시 클릭하면 div가 닫힙니다. 나는 열린 사업부있을 때, 세 개의 버튼의 나머지 부분에 클릭 속성을 해제해야합니다 같은 조건을 추가하려면, 내가 한 일은이 코드의 문제는

for (var i = 1; i <= 4; i++) { 
    $(".slide" + i).click(function() { 
     var openTab = $(this).attr('class'); 
     openTab = openTab.replace('slide', ''); 
     var facetGroup = $(this).attr("key"); 
     if ($('#panel').is(':visible')) { 
      buttonCloser(openTab); 
     } else { 
      buttonOpener(openTab, facetGroup); 
     } 
    }); 
} 

function buttonCloser(m) { 
    for (var j = 1; j <= 4; j++) { 
     if (j != m) { 
      //alert(j); 
      $(".slide" + j).bind("click"); 
     } else { 
      $(".slide" + j).css({ 
       "background-color": " #fff5c3", 
       "color": "#000000" 
      }); 
     } 
    } 
    $("#panel").slideUp("slow"); 
} 

function buttonOpener(m, n) { 
    for (j = 1; j <= 4; j++) { 
     if (j != m) { 
      $(".slide" + j).unbind("click"); 
     } else { 
      $(".slide" + j).css({ 
       "background-color": "#293345", 
       "color": "#fff5c3" 
      }); 
     } 
    } 
    $("#panel").slideDown("slow"); 
    refreshFacet(n); 
} 

입니다입니다 처음 I 슬라이더를 클릭하여 div를 열면 다른 세 번의 클릭 이벤트가 비활성화됩니다. div를 닫으면 click 속성이 다시 활성화됩니다.

var buttons = $('button[class^="slide"]'), 
    panel = $('#panel'); 

$(buttons).click(
    function() { 
     var that = $(this); 
     if (panel.is(':visible')) { 
      if (that.hasClass('opener')) { 
       panel.slideToggle(); 
       that.removeClass('opener'); 
      } 
      else { 
       return false; 
      } 
     } 
     else { 
      panel.slideToggle(); 
      that.addClass('opener'); 
     } 
    });​ 

JS Fiddle demo : 그래서 늘 열려 아무것도 ..

Answer 1

실제 마크 업을 보지 않고, 난 당신이 아니라 '일반'자바 스크립트와 jQuery를 사이에 혼합과 일치하는보다 간단한 jQuery를 사용하는 것이 좋을 것 .

---

참고 :

• addClass().
• attribute begins with selector attribute^="value" selector.
• hasClass().
• removeClass().
• slideToggle().