Question

我有以下HTML -

<div id="new_results">
    <div class="new_result">
        <div class="new_result_header"><h3>Acura ILX</h3></div>
        <div class="new_trim_dropdown"><p>Available Trims - <span>3</span></p>
            <ul class="new_trim_values">
            <li>4dr Sedan (2.0L 4cyl 5A) </li>
            <li>4dr Sedan w/Premium Package (2.4L 4cyl 6M)</li>
            <li>44dr Sedan w/Premium Package (2.0L 4cyl 5A)</li>
            </ul>
        </div>
    </div>
    <div class="new_result">
        <div class="new_result_header"><h3>Acura ILX Hybrid</h3></div>
        <div class="new_trim_dropdown"><p>Available Trims - <span>3</span></p>
            <ul class="new_trim_values">
            <li>4dr Sedan (2.0L 4cyl 5A) </li>
            <li>4dr Sedan w/Premium Package (2.4L 4cyl 6M)</li>
            <li>44dr Sedan w/Premium Package (2.0L 4cyl 5A)</li>
            </ul>
        </div>
    </div>
    <div class="new_result">
        <div class="new_result_header"><h3>Acura MDX</h3></div>
        <div class="new_trim_dropdown"><p>Available Trims - <span>3</span></p>
            <ul class="new_trim_values">
            <li>4dr Sedan (2.0L 4cyl 5A) </li>
            <li>4dr Sedan w/Premium Package (2.4L 4cyl 6M)</li>
            <li>44dr Sedan w/Premium Package (2.0L 4cyl 5A)</li>
            </ul>
        </div>
    </div>
</div>

CSS -

.new_result
{
    border:1px solid red;
    margin-bottom:25px;
}
#new_results .new_trim_values
{
    display:none;
}

JQuery -

<script type="text/javascript">
$(document).on("click", ".new_trim_dropdown", function(event){
    if($(event.target).is($(this).children()))
    {
        $(this).children('.new_trim_values').toggle();
        $(this).parents(".new_result").siblings(".new_result").children('.new_trim_values').hide();
    }

});
</script>

现在开始时隐藏所有列表项。当我点击“Available Trims - 3”时，它的相应列表项将被切换，即显示和隐藏效果。它已经发生了。但是，如果我点击其他隐藏列表项的标题 - 可用修剪 - 3，则应隐藏任何上一个或下一个显示的列表项。我在jquery中使用第二行代码，但它不适用于我。那里有什么不对。 Plz纠正它。感谢。

JSFiddle

的演示

编辑 -

此外，如果有人点击它，我想要隐藏其他或当前打开的列表 - 如果我们点击当前打开的列表以外的任何文档部分。怎么做？

Answer 1

.children()只能在DOM树中找到一个级别。

在您的情况下，.new_trim_values是.new_result的后代，因此您需要使用 .find() 而不是.children()：

$(document).on("click", ".new_trim_dropdown", function (event) {
    if ($(event.target).is($(this).children())) {
        $(this).children('.new_trim_values').toggle();
        $(this).parents(".new_result").siblings(".new_result").find('.new_trim_values').hide();
    }
});

<强> Updated Fiddle

Answer 2

我发现更加实用，首先隐藏所有内容并在之后选择显示：

$(document).on("click", ".new_trim_dropdown", function(event){
    if($(event.target).is($(this).children()))
    {
        $('.new_trim_values').hide();
        $(this).children('.new_trim_values').toggle();
    }
});

如何在jQuery中单击当前列表标题时隐藏其他打开的列表？

2 个答案: