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

【问题标题】：jquery selector isnt working when trying to NOT include something尝试不包含某些内容时，jquery选择器不起作用
【发布时间】：2012-05-26 08:33:17
【问题描述】：

当我单击 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;
}

【问题讨论】：

标签： javascript jquery html jquery-selectors

【解决方案1】：

难道你不能检查一下点击事件的目标是什么，并且只在节点名是表格单元格的情况下进行切换吗？

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

jsFiddle example.

【讨论】：

【解决方案2】：

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

Working example

【讨论】：

【解决方案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();
    }
});

【讨论】：