javascript - 尝试不包含某些内容时，jquery选择器不起作用

Question

当我单击 tr 时，我正在尝试做一个 slideToggle，它扩展了一些隐藏的内容。目前，当我这样做时，它会快门/闪烁，打开和关闭 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").click(function (e) {
    if((e.target.nodeName)=="TH" || (e.target.nodeName)=="TD") $("#bounds").slideToggle();
});​

jsFiddle 示例。

Answer 2

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

工作示例

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