javascript - マテリアル コンポーネント: 内部をクリックしたときにメニューを「開いたままにする」

Question

WEB用素材（メニュー）

---

この質問は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();
    });