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

Question

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

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").find('.new_trim_values').hide();
    }

});
</script>

Теперь при запуске все элементы списка скрыты. Когда я нажимаю "Доступные триммеры - 3", то его соответствующие элементы списка будут переключаться, т.е. Показывать и скрывать эффект. Наряду с этим любые другие открытые элементы списка будут скрыты, если они уже открыты. Но я также хочу скрыть любые открытые элементы списка, когда мы его кликнем, т.е. если мы щелкнем любую часть документа, кроме текущего открытого div. Как это сделать? Демонстрация -

DEMO

3185166 02 май 2014, в 13:00

Источник

0

возможный дубликат закрытия div, нажав снаружи
A. Wolff 02 май 2014, в 10:04

Теги:

jquery

4 ответа

1

Вам нужно добавить обработчик клика в document чтобы скрыть div. Попробуй это:

$(document).click(function() {
    $('.new_trim_values').hide();
});

Пример скрипки

Вам также может потребоваться добавить event.stopPropagation() в обработчик кликов, который переключает divs, в зависимости от вашего поведения.

Наконец, вы можете упростить свой код. Вам не нужно проверять, что цель события - это дочерний элемент селектора, поскольку события вызывают пузырь в DOM. Попробуй это:

$(document).on("click", ".new_trim_dropdown", function (event) {
    event.stopPropagation();
    $('.new_trim_values').hide();
    $(this).find('.new_trim_values').toggle();
});

$(document).click(function() {
    $('.new_trim_values').hide();
});

Обновленная скрипка

Rory McCrossan 02 май 2014, в 07:51

1

Попробуй это

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

});

$(document).on("click", function(event){

      $(this).find('.new_trim_values').hide();

});

скрипка

Sudharsan S 02 май 2014, в 07:27

0

Вы можете использовать это:

$(document).find(":not('.yourSelector')")

Matas Vaitkevicius 02 май 2014, в 08:08

Ещё вопросы

возможный дубликат закрытия div, нажав снаружи

Felix · Accepted Answer · 2014-05-02T07-37-00.000Z

Вы можете использовать:

$(document).on('click',function() {
    $('.new_trim_values').hide();        
});

а также использовать event.stopPropagation(), чтобы предотвратить появление пузырьков событий с .new_trim_dropdown до уровня документа, который скроет его снова:

$(document).on("click", ".new_trim_dropdown", function(event){
    event.stopPropagation();
    // Rest of your code here
});

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

Благодарю. Это сработало очень хорошо. Мне просто нужно было прекратить пузыриться в DOM.