材料组件：单击内部时保持菜单“打开”

Posted 2023-02-22

【中文标题】材料组件：单击内部时保持菜单“打开”

【英文标题】：Material Components: Keeping Menu "Open" when clicking inside

【发布时间】：2018-01-15 11:05:08

【问题描述】：

网页的材料组件（菜单）

---

这个问题与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();
    );

【参考方案1】：

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

我不接受我作为 THE ANSWER 的回答，因为这是一个 hack。

我只想在此处包含此内容，以展示我的快速修复，它执行完全相同的操作（一直到 cubic-bezier 动画）。

注意：我仍在使用它附带的 Material Design Styles...只是没有任何 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;