Как скрыть другие открытые списки, когда нажимаете на заголовок текущего списка в jQuery?

0

У меня есть следующий 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>

Теперь при запуске все элементы списка скрыты. Когда я нажимаю "Доступные триммеры - 3", то его соответствующие элементы списка будут переключаться, т.е. Показывать и скрывать эффект. Это уже происходит. Но если я нажму на заголовок других скрытых элементов списка - доступные триммеры - 3, то любые предыдущие или следующие отображаемые элементы списка должны быть скрыты. Я использую второй код строки в jquery, но он не работает для меня. Что тут плохого. Plz исправить это. Благодарю.

ДЕМО в JSFiddle

РЕДАКТИРОВАТЬ -

Также я хочу скрыть другой или текущий открытый список, если кто-то щелкнет его - если мы щелкнем любую часть документа, отличную от текущего открытого списка. Как это сделать?

Теги:

2 ответа

2
Лучший ответ

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

Обновленный скрипт

  • 0
    Спасибо брат. Это сработало очень хорошо. Да, вы правы, элемент с классом ".new_trim_values" является потомком ".new_result" а не прямым потомком.
1

Я нахожу более практичным, чтобы скрыть все сначала и показать выбранное после этого:

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню