2

网络的材料组件(菜单)


这个问题与菜单组件有关:

我已经修改了代码,以便在悬停而不是单击时打开菜单。当单击菜单中的某些元素时,我现在正尝试使菜单保持打开或关闭状态。但是我无法使其正常工作。

任何人都可以帮忙吗?


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();
    });
4

1 回答 1

-1

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

我不接受我的答案作为答案,因为这是一个黑客。

我只想在此处包含此内容,以展示我的快速修复程序,该修复程序执行完全相同的操作(一直到cubic-bezier动画)。

注意:我仍在使用它附带的材料设计样式......只是没有任何 JS。


代码笔: 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; }
于 2017-08-08T09:51:19.080 回答