Почему не срабатывает hide()?

Question

[denism300]

Есть HTML

<div class="settings__category">
    <div class="category-show__btn">
        <span>Все категории</span>
        <div class="category-show__overlay"></div>
        <div class="category-show__dropdown">
            <div class="category-show__header">
                <span class="category-show__title">Все категории</span>
                <span class="category-show__close"><i class="fa fa-times" aria-hidden="true"></i></span>
            </div>
            <ul class="category-show__cat-list">
                <li>....</li>
                <li>....</li>
                .....
                <li>....</li>
            </ul>
        </div>
    </div>
</div>

есть скрипт

jQuery(document).ready(function($) {
    $('.category-show__btn').on('click', function() {
        $(this).children('.category-show__overlay').show();
        $(this).children('.category-show__dropdown').show();
    });

    $('.category-show__close').on('click', function() {
        $(this).closest('.category-show__dropdown').hide();
        $(this).closest('.category-show__dropdown').prev('.category-show__overlay').hide();
    });

    $('.category-show__overlay').on('click', function() {
        $(this).hide();
        $(this).next('.category-show__dropdown').hide();
    });
})

Метод show работает как надо, метод hide не работает в обеих функциях. Где ошибка?

Answer 1

[Sergey]

hide() у Вас работает. Вот только сначала срабатывает $('.category-show__close').on('click', function() {, а потом для предка $('.category-show__btn').on('click', function() {.

Т.е. за доли секунды у вас блоки прячутся, а потом снова появляются.

Поставьте везде время 1000мс и увидите:

jQuery(document).ready(function($) {
    $('.category-show__btn').on('click', function() {
        $(this).children('.category-show__overlay').show(1000);
        $(this).children('.category-show__dropdown').show(1000);
    });

    $('.category-show__close').on('click', function() {
        $(this).closest('.category-show__dropdown').hide(1000);
        $(this).closest('.category-show__dropdown').prev('.category-show__overlay').hide(1000);
    });

    $('.category-show__overlay').on('click', function() {
        $(this).hide(1000);
        $(this).next('.category-show__dropdown').hide(1000);
    });
})