고유 한 요소가 클릭 된 경우/div 외부에서 클릭 한 경우 (다른 고유 한 요소 포함)

Question

클릭 한 내용을 토대로 클래스를 전환하는 방법을 찾고 있습니다. 내가 좋아하는 것 무엇

이

$(document).on("click", "[id^=element] button", function() { $('[id^=element] hidden_wrapper').toggleClass('some_class'); }); 

전환하는 것입니다 내 이해하는

<div id="element_1"> <!-- notice unique id attached to the end --> 
    <button>My Button</button> 
    <div class="hidden_wrapper"> 
     <span>Something</span> 
     <span>Something else</span> 
    </div> 
</div> 

, 나는 (검증되지 않은) 그 고유 ID를 트리거하기 위해이 같은 작업을 수행 할 수 있습니다 : 예는 말,이이 내 #element_1 .hidden_wrapper 외부의 항목을 클릭하면 해당 고유 ID (해당 클래스를 실제로 제거합니다) 아래의 해당 클래스

누군가가 빛을 비춰 줄 수 있습니까?

Answer 1

전체 문서에 대한 클릭 핸들러를 설정하십시오. 그 핸들러에서, 타겟을 제외한 모든 엘리먼트의 클래스를 토글한다. 여기에 빠르고 더러운 버전이 있습니다. 보다 우아한 접근이 가능합니다.

• 은 당신이 두 번 변경 원하지 않는 요소 토글 때문에

  $("html").on("click", function() { 
      $(".hidden_wrapper").toggleClass("some_class"); 
      $(this).next().toggleClass("some_class"); 
  }) 
  

  이

  은 우아입니다 (같은 종류를 부정적 더블)
• 그것의 다음 형제 인 요소에 따라 달라집니다 단추.

두 가지 문제는 더 많은 코드로 쉽게 해결됩니다.