jquery 선택기가 무언가를 포함하지 않으려 고하면 작동하지 않습니다.

Question

숨겨진 내용을 확장하는 tr을 클릭 할 때 slideToggle을 수행하려고합니다. 현재, 내가 할 때 셔터/점멸, 개폐 4 회. div # bounds (그리고 association, 모든 자식)를 제외한 모든 자식이 onclick 특성을 가질 수 있도록하기 위해 노력하고 있습니다.

<tr id="attr_expander"><th>Alignment</th><td><input class="attribute" type ="text" disabled="true" /> 
    <div id="bounds"> 
     <label><input type="radio" name="toggle" value = "1"><span></span></label> 
     <label><input type="radio" name="toggle" value="2"><span></span></label> 
     <label><input type="radio" name="toggle" value = "4"><span></span></label><br /> 
     <label><input type="radio" name="toggle"value = "16"><span></span></label> 
     <label><input type="radio" name="toggle"value = "32"><span></span></label> 
     <label><input type="radio" name="toggle"value = "64"><span></span></label><br /> 
     <label><input type="radio" name="toggle"value = "256"><span></span></label> 
     <label><input type="radio" name="toggle"value = "512"><span></span></label> 
     <label><input type="radio" name="toggle"value = "1024"><span></span></label> 
    </div> 

JQuery와는 다음과 같습니다

#bounds { 
    margin:4px; 
    background-color:#EFEFEF; 
    border-radius:4px; 
    border:1px solid #D0D0D0; 
    overflow:auto; 
    float:left; 
} 

#bounds label { 
    float:left; 
    width:2.25em; 
    height:3.0em; 
    border: 1px solid black; 
} 

#bounds label span { 
    text-align:center; 
    padding:3px 0px; 
    display:block; 

    width:2.25em; 
    height:2.75em; 
} 

#bounds label span:hover 
{ 
    background-color:Aqua; 
    border: 1px solid black; 
} 

#bounds label input { 
    position:absolute; 
    top:-20px; 
} 

#bounds input:checked + span { 
    background-color:#404040; 
    color:#F7F7F7; 
}​ 

Answer 1

$("#attr_expander").find('*').not('#bounds, #bounds *').click(function() { 
    $("#bounds").slideToggle(); 
}); 

Working example

:

$("#attr_expander").find("*:not(div[id='bounds'])").click(function() { 
    $("#bounds").slideToggle(); 
}); 

CSS를 조금 더보고 일을하기 위해

Answer 2

클릭 이벤트의 대상이 무엇인지 확인하고 노드 이름이 표 셀인 경우에만 토글을 수행 할 수 있습니까?

$("#attr_expander").click(function (e) { 
    if((e.target.nodeName)=="TH" || (e.target.nodeName)=="TD") $("#bounds").slideToggle(); 
});​ 

jsFiddle example.

Answer 3

그냥 요소에 바인딩 한 다음 #bounds이 부모 중 하나인지 확인할 수 있습니다. 이렇게하면 요소 당 하나가 아닌 하나의 이벤트 수신기 만 바인딩합니다.

http://jsfiddle.net/G3tnQ/3/

$("#attr_expander").on('click', function (e) { 
    var bounds = '#bounds', 
     $target = $(e.target); 

    if (!$target.is(bounds) && $target.closest(bounds).length === 0) { 
     $(bounds).slideToggle(); 
    } 
});​