我正在使用 Material Design Lite 创建教程中的菜单 - 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>
当点击分享按钮时菜单没有创建,这里是设计的图片
最佳答案
将“ul”元素的“for”属性替换为“data-mdl-for”应该可以解决问题。
试试下面的代码
<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>
希望对你有帮助
关于css - Material Design Lite 菜单在 Card Design 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45156921/