Как можно переписать этот код JavaScript с использованием JQuery?

Question

Ruby

javascript

Как можно переписать этот код JavaScript с использованием JQuery?

Как можно улучшить функцию `subnav()`, чтобы при клике на элемент списка этот элемент отображал подменю, а при клике в другом месте подменю скрывалось?

1 апреля 2024 г. 6:29

Ответы на вопрос 2

Похожие вопросы

Answer 1

Пример переписанного кода с использованием JQuery:

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Submenu Dropdown</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .submenu {
            display: none;
        }
    </style>
</head>

<body>
    <ul>
        <li class="dropdown">Menu 1
            <ul class="submenu">
                <li>Submenu 1</li>
                <li>Submenu 2</li>
                <li>Submenu 3</li>
            </ul>
        </li>
        <li class="dropdown">Menu 2
            <ul class="submenu">
                <li>Submenu 1</li>
                <li>Submenu 2</li>
            </ul>
        </li>
    </ul>

    <script>
        $(document).ready(function() {
            $('.dropdown').click(function() {
                $(this).children('.submenu').toggle();
                $('.submenu').not($(this).children('.submenu')).hide();
            });

            $(document).click(function(event) {
                if (!$(event.target).closest('.dropdown').length) {
                    $('.submenu').hide();
                }
            });
        });
    </script>
</body>

</html>
```

Для улучшения функции `subnav()` и скрытия подменю при клике в другом месте, можно добавить обработчик клика на `document`, который будет скрывать подменю, если клик был сделан вне элементов списка или подменю.

Также использование JQuery позволяет более компактно обращаться к элементам DOM и управлять ими.

Answer 2

<pre><code class="javascript">$(function() {
    $(window).on("click", e =&gt; {
        $('.header-nav-list-item.subnav').each(function() {
            const $subMenu = $(this).find(".header-nav-list-subnav-menu");
            const isVisible = e.target === this || $.contains(this, e.target);
            $subMenu.toggle(isVisible);
            // if (!isVisible) $subMenu.hide();
        });
    });
});</code></pre>