javascript - Material 组件 : Keeping Menu "Open" when clicking inside

Question

Web 的 Material 组件(菜单)

---

这个问题与 Menu Component 有关:

我修改了代码，以便在悬停而不是单击时打开菜单。我现在正在尝试在单击菜单内部的某些元素时使菜单保持打开或关闭状态。但是我无法让它工作。

有人能帮忙吗？

---

Codepen 链接: https://codepen.io/oneezy/pen/prejpw

---

示例:

• 何时<li class="wont-close">被点击，菜单不会关闭。 menu.show();
• 何时<li class="will-close">单击，菜单将关闭。 menu.hide();

这是我的尝试:

HTML

<section class="demo">
<div class="mdc-tab-bar">

    <!-- Hover Toggle (Wrapper) -->
    <div class="mdc-tab-wrapper hover-toggle">
        
        <!-- Button (For Looks) -->
        <a class="mdc-button mdc-button--raised mdc-button--primary mdc-tab mdc-ripple-upgraded" role="tab">
            Hover Menu
        </a>

        <!-- Hover Menu (Toggles Show/Hide)-->
        <nav class="mdc-simple-menu mdc-tab-items-wrapper" tabindex="-1">
            <ul class="mdc-simple-menu__items mdc-list" role="menu" aria-hidden="true">
                
                <!-- Won't Close (When Clicked) -->
                <li class="mdc-list-item wont-close clone-me" role="menuitem" tabindex="0">
                    <a class="category-items flex-horizontal between-stretch" href="#">
                        <i class="material-icons margin-r-5">keyboard_arrow_right</i>
                        <span>Won't Close</span>
                    </a>
                </li>
                
                <!-- Will Close (When Clicked) -->
                <li class="mdc-list-item will-close" role="menuitem" tabindex="0">
                    <a class="category-items flex-horizontal between-stretch" href="#">
                        <i class="material-icons margin-r-5">close</i>
                        <span>Will Close</span>
                    </a>
                </li>
                
            </ul>
        </nav>
        
    </div>
    
</div>

JS

    /* Hover Tabs
    *********************************/
    function hoverTabs() {
        var menuEls     =   document.querySelectorAll('.mdc-simple-menu');

        menuEls.forEach((el, i) => {
            var menu        =   new mdc.menu.MDCSimpleMenu(el);
            var toggle      =   $(el).closest('.hover-toggle')[0];
            var wontClose   =   $(el).closest('.wont-close'); // Not working...
            var willClose   =   $(el).closest('.will-close'); // Not working...

            toggle.addEventListener('mouseover', function() {
                menu.show();
            });

            toggle.addEventListener('mouseleave', function() {
                menu.hide();
            });


            /* Attempt #1 (Not working...)
            *******************************************************/
            // wontClose.addEventListener('click', function() {
            //  menu.show();
            // });

            // willClose.addEventListener('click', function() {
            //  menu.hide();
            // });


            /* Attempt #2 (Not working...)
            *******************************************************/
            // $('.wont-close').on('click', function(e) {
            //  e.preventDefault();
            //  menu.show();
            // });
            // 
            // $('.will-close').on('click', function(e) {
            //  e.preventDefault();
            //  menu.hide();
            // });

        });
    }

    $(document).ready(function() {
        hoverTabs();
    });

Answer 1

如有疑问，创建一个纯 CSS 解决方案...

I'm not accepting my answer as THE ANSWER because this is a hack.

I just want to include this here to show my quick fix that does the exact same thing (right on down to the cubic-bezier animation).

NOTE: I'm still using the Material Design Styles it ships with... Just not any of the JS.

Codepen: https://codepen.io/oneezy/pen/PKpJXV

---

HTML

    <!-- Hover Toggle (Wrapper) -->
    <div class="mdc-tab-wrapper hover-toggle clone-menu">

        <!-- Button (For Looks) -->
        <a class="mdc-button mdc-button--raised mdc-button--primary">Hover Menu</a>

        <!-- Hover Menu (Toggles Show/Hide)-->
        <nav class="mdc-simple-menu mdc-simple-menu--open" tabindex="-1">
            <ul class="mdc-simple-menu__items mdc-list" role="menu" aria-hidden="true">

                <!-- Won't Close (When Clicked) -->
                <li class="mdc-list-item clone-me" role="menuitem" tabindex="0">
                    <a class="category-items flex-horizontal between-stretch" href="#">
                        <i class="material-icons margin-r-5">keyboard_arrow_right</i>
                        <span>Menu Item</span>
                    </a>
                </li>

            </ul>
        </nav>

    </div>

CSS

/* Reset
========================================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; text-decoration: none; }

html,
body,
main                { display: flex; flex-direction: column; height: 100%; }

section             { padding: 5%; }
a                   { color: var(--mdc-theme-primary); }
h1              { background: black; color: white; padding: .25rem 1rem; position: relative; }
h1 span             { font-weight: normal; font-size: 16px; position: absolute; right: 24px; top: 14px; display: inline-block; text-transform: uppercase; }


/* Material Design Menu
========================================================================= */
/* Menu Styles */
.wrapper                                                 { position: relative; display: flex; justify-content: space-between; }
.wrapper .hover-toggle                               { display: inline-block; position: relative; }
.wrapper .hover-toggle .mdc-button               { z-index: 2; position: relative; color: white; min-width: auto; }
.wrapper .hover-toggle .mdc-simple-menu          { width: 100%; top: 100% !important; position: absolute; right: 0 !important; left: 0 !important; z-index: 1; padding: 0; }

.mdc-simple-menu .mdc-list, 
.mdc-simple-menu .mdc-list-group                 { padding: 0; }

/* Hover Effects */
.hover-toggle .mdc-simple-menu--open             { opacity: 0; transform: scale(0, 0) translateY(-40px); transition: .2s cubic-bezier(0, 0, 0.2, 1); position: absolute; transform-origin: left top 0px; left: 0px; top: 0px;  }
.hover-toggle:hover .mdc-simple-menu--open   { opacity: 1; transform: scale(1,1) translateY(0); }

.mdc-simple-menu .mdc-list-item:before       { opacity: 0;  position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: opacity .12s cubic-bezier(0,0,.2,1); transition: opacity .12s cubic-bezier(0,0,.2,1); border-radius: inherit; background: var(--mdc-theme-primary); content: ""; }
.mdc-simple-menu .mdc-list-item:hover:before  { opacity: .1; }
.mdc-simple-menu .mdc-list-item:active:before { opacity: .2; }