3

Когда я задаю $('.btn-list').hover, то всё работает. Когда задаю $('.btn-list').click, всё перестает работать.
Делал ещё $('.btn-list').bind('click', 'a', function()), то клик работает, но только один раз: он опускает меню, а обратно не работает.

$(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>

4
  • 1
    Не вижу в вопросе примера кода с .click().
    – Regent
    11 июл 2016 в 7:57
  • Не вижу в вопросе примера кода с .click() +1 11 июл 2016 в 8:10
  • Вот документация по jquery на русском языке, .click()
    – Doofy
    11 июл 2016 в 8:12
  • сделал с кликом 11 июл 2016 в 8:18

1 ответ 1

1

При передаче двух функций в качестве параметров в функцию .click() первая распознаётся как eventData (информация, передаваемая в обработчик), а вторая - непосредственно как handler (обработчик события).

Для достижения нужного результата можно, например, использовать флаг:

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

Не самое изящное решение, но простое.

1
  • Спасибо большое, работает) 11 июл 2016 в 8:31

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.