JQuery와 클래스 목록 토글 외부 요소

Question

예쁜 JQuery와/자바 스크립트에 대한 새로운,하지만 HTML/CSS를 능숙

...

을 클릭 나는 클래스 .item와 형제 자매의 목록을 가지고있다. 각 핀은지도에 있습니다. 내가 3 일 달성하고 싶습니다 : 내가 CSS로 조작하는 '활성'의 클래스를 사용하여,

• 오픈/클릭에 가까운 토글을
• 하나 .item가 열려 가까운 그것을 다른 클릭 또한 .item 외부를 클릭하면이 새로운
• , 그것이 내가 ID를 사용하여 몇 가지 예를 본 적이

닫습니다 열고, 그러나 희망 난 그냥 .item 클래스, 혹은 부모 ID를 사용할 수 있습니다 - #map.

내가 toggleClass를 사용하여 첫 번째 점()을 달성 한

$('#map .item').click(function() { 
    $(this).toggleClass('active'); 
}); 

간체 HTML : 어떤 도움

<div id="map"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
</div> 

감사합니다.

내가 제대로 이해하면

Answer 1

이 작동합니다 :

$("#map .item").click(function(e) { 
    var self = $(this)[0]; 
    $(".item").each(function(index) { 
     if (self == $(this)[0]) 
      $(self).addClass("active"); 
     else 
      $(this).removeClass("active"); 
    }); 
}); 
$("body").click(function(e) { 
    if (!e.target.id == "map" || !$(e.target).parents("#map").size()) { 
     $(".item").removeClass("active"); 
    } 
}); 

Here is a fiddle 예 :

$(function() { 
    $('#map .item').click(function(evt) { 
     evt.stopPropagation(); //stops the document click action 
     $(this).siblings().removeClass('active'); 
     $(this).toggleClass('active'); 
    }); 


    $(document).click(function() { 
     $('#map .item').removeClass('active'); //make all inactive 
    }); 
}); 

당신은 또한 작동 같이 여기 http://api.jquery.com/event.stopPropagation/

Answer 2

뭔가를 버블 링 이벤트에 대한 자세한 내용을보실 수 있습니다 그것의 일.