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

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>

现在，在开始时，所有的列表项目是隐藏的。当我点击“可用Trims - 3”，那么它的相应列表项目将被切换，即显示和隐藏效果。已经发生了。但是，如果我单击其他隐藏列表项的标题-可用TRIM-3，那么任何先前或下一个显示的列表项都应该被隐藏。我正在使用jquery中的第二行代码，但它不适合我。那是怎么回事。请更正一下。谢谢。

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

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