需要同时打开多个下拉菜单

时间：2018-08-25 08:40:31

标签： jquery wordpress menu navigation dropdown

我需要帮助。我在bootstrap 4上有下拉菜单，当我单击第一个下拉菜单并同时打开第二个下拉菜单时（不在此下拉菜单中）。我需要同时打开下拉菜单而不隐藏其他下拉菜单。每次尝试，我都会失败。它是Wordpress生成的菜单。与 https://github.com/wp-bootstrap/wp-bootstrap-navwalker。

屏幕上我要打开的内容： 下拉菜单需要同时打开 enter image description here

HTML 

    <ul id="menu-side-menu" class="nav flex-column"><li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-725" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-725 nav-item"><a title="Dropdown" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link" id="menu-item-dropdown-725">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-725" role="menu" x-placement="bottom-start" style="display: none; position: absolute; transform: translate3d(0px, 41px, 0px); top: 0px; left: 0px; will-change: transform;">
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-728" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-728 nav-item"><a title="Menu item 2" href="/link/" class="nav-link">Menu item 2</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-730" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-730 nav-item"><a title="Dropdown 2" href="#" class="nav-link">Dropdown 2</a>
    <ul class="dropdown-menu show" aria-labelledby="menu-item-dropdown-725" role="menu" style="display: block;">
        <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-731" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-731 nav-item"><a title="Menu item 3" href="/link/" class="nav-link">Menu item 3</a></li>
    </ul>
</li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-726" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-726 nav-item show"><a title="Dropdown" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="nav-link" id="menu-item-dropdown-726">Dropdown</a>
<ul class="dropdown-menu show" aria-labelledby="menu-item-dropdown-726" role="menu" x-placement="top-start" style="display: block; position: absolute; transform: translate3d(0px, -41px, 0px); top: 0px; left: 0px; will-change: transform;">
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-729" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-729 nav-item"><a title="Menu item 2" href="/link/" class="nav-link">Menu item 2</a></li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-727" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-727 nav-item"><a title="Menu item" href="/link/" class="nav-link">Menu item</a></li>
</ul>

JS：

$('.dropdown-menu a').on('click', function (e) {
            if (!$(this).next().hasClass('show')) {
                $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
            }
            var $subMenu = $(this).next(".dropdown-menu");
            $subMenu.stop(true, true).slideToggle(200);
            $subMenu.toggleClass('show');

            // if (/#/.test(this.href)) {
            if ($(this).is('[href="#"]')) {

                return false;

            }
        });

        $(document).on('click', ':not(.dropdown)', function (e) {
            if ($(this).closest('.dropdown').length == 0) {
                e.stopPropagation();
            }
        });

        $('.flex-column .dropdown').on('show.bs.dropdown', function (e) {
            $(this).find('.dropdown-menu').first().stop(true, true).slideDown(200);
        });

        $('.flex-column .dropdown').on('hide.bs.dropdown', function (e) {
            $(this).find('.dropdown-menu').first().stop(true, true).slideUp(200);
        });

演示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Codeply preview</title>
    <base target="_self">
    <meta name="description"
          content="Example of a c level navbar dropdown with submenus in Bootstrap 3. This shows how to show menus on click or hover"/>
    <meta name="google" value="notranslate">
    <link rel="shortcut icon" href="/images/cp_ico.png">


    <!--stylesheets / link tags loaded here-->


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
    <style>
        .nav.flex-column .dropdown-menu {
            width: 100% !important;
            border: 0 !important;
            border-radius: 0 !important;
            position: relative !important;
            transform: translate3d(0px, 0px, 0px) !important;
            padding: 0;
            margin: 0;
            float: none !important;
        }

        .flex-column .dropdown .dropdown-menu li .dropdown-menu, .flex-column .dropdown .dropdown-menu {
            background: #fafafa;
        }

        .bg-main-white-silver ul {
            -webkit-margin-end: 0px;
            -webkit-padding-start: 0px;
        }

        .dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 1000;
            display: none;
            float: left;
            min-width: 10rem;
            padding: 0.5rem 0;
            margin: 0.125rem 0 0;
            font-size: 1rem;
            color: #212529;
            text-align: left;
            list-style: none;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid rgba(0, 0, 0, 0.15);
            border-radius: 0.25rem;
        }
    </style>

</head>
<body>


<ul id="menu-side-menu" class="nav flex-column">
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-725"
        class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-725 nav-item">
        <a title="Dropdown" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link"
           id="menu-item-dropdown-725">Dropdown</a>
        <ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-725" role="menu" x-placement="bottom-start">
            <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-728"
                class="menu-item menu-item-type-custom menu-item-object-custom menu-item-728 nav-item"><a
                    title="Menu item 2" href="/link/" class="nav-link">Menu item 2</a></li>
            <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-730"
                class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-730 nav-item">
                <a title="Dropdown 2" href="#" class="nav-link">Dropdown 2</a>
                <ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-725" role="menu">
                    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-731"
                        class="menu-item menu-item-type-custom menu-item-object-custom menu-item-731 nav-item"><a
                            title="Menu item 3" href="/link/" class="nav-link">Menu item 3</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-726"
        class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-726 nav-item">
        <a title="Dropdown" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="nav-link"
           id="menu-item-dropdown-726">Dropdown</a>
        <ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-726" role="menu" x-placement="top-start">
            <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-729"
                class="menu-item menu-item-type-custom menu-item-object-custom menu-item-729 nav-item"><a
                    title="Menu item 2" href="/link/" class="nav-link">Menu item 2</a></li>
        </ul>
    </li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-727"
        class="menu-item menu-item-type-custom menu-item-object-custom menu-item-727 nav-item"><a title="Menu item"
                                                                                                  href="/link/"
                                                                                                  class="nav-link">Menu
        item</a></li>
</ul>


<!--scripts loaded here-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<script>

    $('.dropdown-menu a').on('click', function (e) {
        if (!$(this).next().hasClass('show')) {
            $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
        }
        var $subMenu = $(this).next(".dropdown-menu");
        $subMenu.stop(true, true).slideToggle(200);
        $subMenu.toggleClass('show');

        // if (/#/.test(this.href)) {
        if ($(this).is('[href="#"]')) {

            return false;

        }
    });

    $(document).on('click', ':not(.dropdown)', function (e) {
        if ($(this).closest('.dropdown').length == 0) {
            e.stopPropagation();
        }
    });

    $('.flex-column .dropdown').on('show.bs.dropdown', function (e) {
        $(this).find('.dropdown-menu').first().stop(true, true).slideDown(200);
    });

    $('.flex-column .dropdown').on('hide.bs.dropdown', function (e) {
        $(this).find('.dropdown-menu').first().stop(true, true).slideUp(200);
    });
</script>

</body>
</html>

0 个答案:

没有答案
相关问题
最新问题