jquery selector не работает при попытке НЕ включать что-то

Question

Я пытаюсь сделать slideToggle, когда я нажимаю на tr, что расширяет скрытый контент. Ток, когда я это сделаю, он затвора/мигание, открытие и закрытие 4 раза. То, что я пытаюсь сделать, делает так, чтобы ВСЕ дети, кроме div # bounds (и по ассоциации, все его дочерние элементы) получат этот атрибут 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 является:

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

CSS, чтобы сделать вещи выглядит немного лучше:

#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

Answer 2

Не могли бы вы просто проверить, что такое цель события click, и только делать, если nodename является ячейкой таблицы?

$("#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(); 
    } 
});​