Question

使用材质设计精简版时菜单无效

这是我的_layout.cstml

    @inject Microsoft.ApplicationInsights.AspNetCore.JavaScriptSnippet JavaScriptSnippet
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - FalconWebsite</title>
    <link rel="shortcut icon" href="~/images/transfeteLogo.png" type="image/png" />
    <environment names="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <link href="~/lib/googleMaterialDesignLite/material.indigo-pink.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment names="Staging,Production">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <link href="~/lib/googleMaterialDesignLite/material.indigo-pink.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    @Html.Raw(JavaScriptSnippet.FullScript)


    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="~/node_modules/core-js/client/shim.min.js"></script>
    <script src="~/node_modules/zone.js/dist/zone.js"></script>
    <script src="~/node_modules/reflect-metadata/Reflect.js"></script>
    <script src="~/node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="~/js/systemjs.config.js"></script>
    <script>
        System.import('app').catch(function (err) { console.error(err); });
    </script>


    <environment names="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/lib/googleMaterialDesignLite/material.min.js"></script>

        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment names="Staging,Production">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/lib/googleMaterialDesignLite/material.min.js"></script>

        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>


    @RenderSection("Scripts", required: false)
</head>
<body>

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">

    <header class="mdl-layout__header mdl-layout__header--waterfall">
        <!-- Top row, always visible -->
        <div class="mdl-layout__header-row mdl-layout__header">
            <span class="mdl-layout-title"><strong>FeteBird</strong><img src="~/images/transfeteBirdLogo.png" width="50" height="50" /></span>

            <!-- Displayed on Computer and Tablet -->
            <!-- Search -->
            <div class="mdh-expandable-search mdl-cell--hide-phone">
                <form >
                    <input type="text" placeholder="Search for Product , Brands ..">
                    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" style="background: #009688; height: 40px;">
                        <i class="material-icons" style="color: white">search</i>
                    </button>

                </form>
            </div>


            <div class="mdl-layout-spacer mdl-cell--hide-tablet mdl-cell--hide-desktop"></div>
            <div class="mdl-cell--hide-tablet mdl-cell--hide-desktop mdl-textfield mdl-js-textfield mdl-textfield--expandable
                  mdl-textfield--floating-label mdl-textfield--align-right">
                <label class="mdl-button mdl-js-button mdl-button--icon"
                       for="waterfall-exp">
                    <i class="material-icons">search</i>
                </label>
                <div class="mdl-textfield__expandable-holder">
                    <input class="mdl-textfield__input" type="text" name="sample"
                           id="waterfall-exp">
                </div>
            </div>

            <!-- Buttons -->
            <!-- Right aligned menu below button -->
            <button id="demo-menu-lower-right"
                    class="mdl-button mdl-js-button mdl-button--icon">
                <i class="material-icons">more_vert</i>
            </button>

            <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
                for="demo-menu-lower-right">
                <li class="mdl-menu__item">Mobile App</li>
                <li class="mdl-menu__item">Customer Care</li>
                <li class="mdl-menu__item">Track Order</li>
                <li class="mdl-menu__item">Log in</li>
            </ul>
        </div>
        <!-- Bottom row, not visible on scroll -->
        <div class="mdl-layout__header-row" style="height: 35px;">
            <!-- Navigation -->
            <nav class="mdl-navigation">
                <a class="mdl-navigation__link" href="">Electronics</a>
                <a class="mdl-navigation__link" href="">Cloths</a>
                <a class="mdl-navigation__link" href="">men</a>
                <a class="mdl-navigation__link" href="">Women</a>
            </nav>
        </div>
    </header>



    <div class="mdl-layout__drawer mdl-layout--small-screen-only">
        <span class="mdl-layout-title"><img src="~/images/transfeteBirdLogo.png" width="80" height="80" /></span>
        <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Link</a>
            <a class="mdl-navigation__link" href="">Link</a>
            <a class="mdl-navigation__link" href="">Link</a>
            <a class="mdl-navigation__link" href="">Link</a>
        </nav>
    </div>
    <main class="mdl-layout__content">
        <div class="page-content">@RenderBody()</div>
    </main>

</div>

</body>
</html>

在渲染部分，我有一个包含以下项目的页面

    <ul class="demo-list-item mdl-list">
    <li class="mdl-list__item">
        <div class="mdl-shadow--2dp">
            <div class="text-center">
                <h3>New Arrival</h3>

                <hr class="star-primary">
            </div>

            <div class="mdl-grid">

                <div class="mdl-card mdl-cell mdl-cell--2-col mdl-cell--4-col-tablet mdl-shadow--2dp">
                    <figure class="mdl-card__media">
                        <img src="~/images/cloth.jpg" alt="" class="img-responsive" />
                    </figure>
                    <div class="mdl-card__supporting-text">
                        <p>Flying Machine Skinny Women's Blue Jeans</p>
                        <span>
                            <strong style="color: rgb(63, 81, 181);">Npr-429 </strong><del disabled>Npr-899</del> <span style="color: rgb(0, 150, 136);">52% off</span>
                        </span>

                    </div>
                    <div class="mdl-card__actions mdl-card--border text-center">

                        <button id="share-menu" class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect pull-left">
                            <i class="material-icons">share</i>
                        </button>
                        <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
                            for="share-menu">
                            <li class="mdl-menu__item">Some Action</li>
                            <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
                            <li disabled class="mdl-menu__item">Disabled Action</li>
                            <li class="mdl-menu__item">Yet Another Action</li>
                        </ul>
                        <span class="mdl-chip mdl-chip--contact center-block">
                            <span class="mdl-chip__contact mdl-color--teal mdl-color-text--white">12</span>
                            <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">thumb_up</i></button>
                        </span>
                        <button class="mdl-button mdl-button--icon mdl-button--colored pull-right"><i class="material-icons">add_shopping_cart</i></button>
                    </div>
                    <div class="mdl-card__menu">
                        <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                            <i class="material-icons">favorite</i>
                        </button>
                    </div>
                </div>
</li>
</ul>

菜单根本不起作用。单击菜单项时不显示任何内容。

以下是设计的示例图像。突出显示的红色未显示。

我找到了一些链接，但该解决方案对我不起作用 Material Design Lite Menu not working in Card Design

替换＆＃39; for＆＃39; ＆lt; ul;＆＃39;的属性元素到＆＃39; data-mdl-for＆＃39;应该解决问题。这对我不起作用

Material Design lite菜单在带有角度2的asp.net核心中不起作用

0 个答案: