网络的材料组件（菜单）

Question

网络的材料组件（菜单）

此问题与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解决方案......

我不接受我的答案为答案，因为这是一个黑客攻击。

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

注意：我还在使用它附带的材料设计样式 ......只是没有任何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; }

材料组件：保持菜单＆＃34;打开＆＃34;在里面点击

网络的材料组件（菜单）

以下是我的尝试：

1 个答案: