Javascript 试图不包含某些内容时，jquery选择器不起作用

我试图做一个幻灯片切换，当我点击一个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>

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;
}​

---

您难道不能检查一下click事件的目标是什么，并且只在nodename是表单元格时进行切换吗

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

---

您可以只绑定到元素，然后检查

#bounds

是否是父元素之一。这样，您只绑定一个事件侦听器，而不是每个元素绑定一个

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

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

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

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