材料設計精簡版菜單卡設計沒有工作

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

更換「爲」的「UL」的Elemen的屬性的圖像t到'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> 

希望這有助於