Material Design Lite菜单在卡片设计中不起作用

Question

我正在使用材质设计精简版来创建教程中的菜单 - https://getmdl.io/components/

这是代码

<div class="mdl-card__actions mdl-card--border">

                        <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>

单击共享按钮时，此处未创建菜单是设计图像

Answer 1

替换＆＃39; for＆＃39; ＆lt; ul;＆＃39;的属性元素到＆＃39; data-mdl-for＆＃39;应该解决问题。

尝试以下代码

<div class="mdl-card__actions mdl-card--border">

                    <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"
                        data-mdl-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>

希望这有帮助