Question

我在Material Design Lite上遇到了问题。我试图添加＆＃34;分享＆＃34;我文章上的按钮。

当我点击时，我想要一些像facebook，twitter的图标。我不想背景。如果您尝试我的代码，它就可以正常工作。

我唯一的问题是每次点击分享按钮时出现的白色方块。它隐藏了我的图标。如何删除它？在哪里？

感谢您的帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

你可以这样做：

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

按钮单击：隐藏列表

1 个答案: