我对 Material Design Lite 有疑问。我正在尝试在我的文章中添加一个“分享”按钮。
当我点击时，我希望出现一些图标，如 facebook、twitter。我不想有背景。如果您尝试我的代码，它就可以正常工作。
我唯一的问题是每次单击共享按钮时都会出现一个白色方 block 。它隐藏了我的图标。如何删除它？在哪里？
感谢您的帮助。
.mdl-menu-share{position:absolute;list-style:none;top:0;left:0;height:auto;width:auto;padding:8px 0;opacity:1;z-index:-1;}
.mdl-menu-share .mdl-menu-share--bottom-right{left:auto;right:0}<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue-orange.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="blog mdl-layout mdl-js-layout has-drawer is-upgraded">
<main class="mdl-layout__content"> <!-- body -->
<div class="blog__posts mdl-grid">
<div class="mdl-card Article--1 mdl-cell mdl-cell--8-col"> <!-- Article #1 -->
<div class="mdl-card__media mdl-color-text--grey-800"> <!-- Article #1 Backgroud -->
</div>
<div class="mdl-color-text--light-blue-700 mdl-card__title">
TITLE
</div>
<div class="mdl-color-text--grey-600 mdl-card__supporting-text">
Say something about the article
</div>
<div class="mdl-card__menu">
<button id="share1" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons mdl-color-text--red-400">share</i>
</button>
<ul class="mdl-menu-share mdl-menu-share--bottom-right mdl-js-menu" for="share1">
<li class="mdl-button mdl-js-button mdl-button--icon"><i class="material-icons mdl-color-text--red-400">folder</i></li>
<li class="mdl-button mdl-js-button mdl-button--icon"><i class="material-icons mdl-color-text--red-400">alarm</i></li>
<li class="mdl-button mdl-js-button mdl-button--icon"><i class="material-icons mdl-color-text--red-400">visibility</i></li>
<li class="mdl-button mdl-js-button mdl-button--icon"><i class="material-icons mdl-color-text--red-400">error</i></li>
</ul>
</div>
</div>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>
</html>最佳答案
你可以这样做:
.mdl-menu-share {
position: absolute;
list-style: none;
top: 0;
left: 0;
height: auto;
width: auto;
padding: 8px 0;
opacity: 1;
z-index: -1;
}
.mdl-menu-share .mdl-menu-share--bottom-right {
left: auto;
right: 0
}
.mdl-menu__container.is-visible .mdl-menu__outline {
display: none;
}<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue-orange.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="blog mdl-layout mdl-js-layout has-drawer is-upgraded">
<main class="mdl-layout__content">
<!-- body -->
<div class="blog__posts mdl-grid">
<div class="mdl-card Article--1 mdl-cell mdl-cell--8-col">
<!-- Article #1 -->
<div class="mdl-card__media mdl-color-text--grey-800">
<!-- Article #1 Backgroud -->
</div>
<div class="mdl-color-text--light-blue-700 mdl-card__title">
TITLE
</div>
<div class="mdl-color-text--grey-600 mdl-card__supporting-text">
Say something about the article
</div>
<div class="mdl-card__menu">
<button id="share1" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons mdl-color-text--red-400">share</i>
</button>
<ul class="mdl-menu-share mdl-menu-share--bottom-right mdl-js-menu" for="share1">
<li class="mdl-button mdl-js-button mdl-button--icon"><i class="material-icons mdl-color-text--red-400">folder</i></li>
<li class="mdl-button mdl-js-button mdl-button--icon"><i class="material-icons mdl-color-text--red-400">alarm</i></li>
<li class="mdl-button mdl-js-button mdl-button--icon"><i class="material-icons mdl-color-text--red-400">visibility</i></li>
<li class="mdl-button mdl-js-button mdl-button--icon"><i class="material-icons mdl-color-text--red-400">error</i></li>
</ul>
</div>
</div>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>
</html>关于css - 按钮点击 : hidden list，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42886597/