javascript – Repeated click does not work

Question:

When I set $('.btn-list').hover everything works. When I ask $('.btn-list').click everything stops working.
I also $('.btn-list').bind('click', 'a', function()) , then the click works, but only once: it brings down the menu, but does not work back.

$(document).ready(function() {
    $('.btn-list').click(function() {
        $(this).children('ul').stop(false, true).slideDown('slow');
    }, function() {
        $(this).children('ul').stop(false, true).fadeOut(300);

    });
});
$(document).ready(function() {
    $('.btn-list').click(function() {
        $(this).children('ul').stop(false, true).slideDown('slow');
    }, function() {
        $(this).children('ul').stop(false, true).fadeOut(300);
    });
});
#nav
{
    margin: 30px;
}
#nav li
{
    list-style: none;
    float: left;
    width: 150px;
}
#nav>li>ul
{
    display: none;
    margin-left: -40px;
}
#nav a
{
    text-decoration: none;
    display: block;
    padding: 10px;
    background: green;
}
#nav > li > ul > li
{
    position:relative;
}
#nav > li > ul > li > ul
{
    display:none;
    position:absolute;
    left:73%;
    top:0;
}
#nav > li > ul > li:hover > ul
{
    display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<nav>
    <ul id="nav">
        <li class="btn-list">
            <a href="#">Магазин</a>
            <ul class="t">
                <li><a href="#">Домашня сторiнка</a></li>
                <li class="r">
                    <a href="#" >Office</a>
                    <ul class="add-block">
                        <li><a href="#">Windows</a></li>
                        <li><a href="#">Windows</a></li>
                        <li><a href="#">Windows</a></li>
                    </ul>
                </li>
                <li><a href="#">Windows</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Продукты</a>
            <ul>
                <li><a href="#">Програмне забезпечення та служби</a></li>
                <li><a href="#">Пристрої та Xbox</a></li>
                <li><a href="#">Для бiзнесу</a></li>
                <li><a href="#">Для IT-фахiвцiв i розробникiв</a></li>
                <li><a href="#">Освiта</a></li>
            </ul>
        </li>
        <li><a href="#">Пiдримка</a></li>
    </ul>
</nav>

Answer:

When passing two functions as parameters to the .click () function, the first is recognized as eventData (information passed to the handler), and the second is recognized directly as handler (event handler).

To achieve the desired result, you can, for example, use the flag:

$(document).ready(function() {
    var opened = false;
    $('.btn-list').click(function() {
        if (!opened) {
            $(this).children('ul').stop(false, true).slideDown('slow');
        }
        else {
            $(this).children('ul').stop(false, true).fadeOut(300);
        }
        opened = !opened;
    });
});

Not the most elegant solution, but simple.

Scroll to Top