0

我正在尝试向我的页面添加一个 mdc-select 元素，但无论我尝试做什么，这些选项始终可见。在查看包含选择组件的其他人的代码笔时，我什至看到了这个问题。比如这个：https ://codepen.io/anon/pen/EQQqyb

HTML：

<p class="mdl-typography--body">
Use this pen as a starting point to prototype a new component, experiement with, or reproduce an issue with <a href="https://github.com/material-components/material-components-web" target="_blank">Material Components for the web</a>.
</p>
<div id="js-select" class="mdc-select" role="listbox">
                <div class="mdc-select__surface" tabindex="0">
                    <div class="mdc-select__label">Food Group</div>
                    <div class="mdc-select__selected-text"></div>
                    <div class="mdc-select__bottom-line"></div>
                </div>
                <div class="mdc-simple-menu mdc-select__menu">
                    <ul class="mdc-list mdc-simple-menu__items">
                        <li class="mdc-list-item" role="option" id="fruit-roll-ups" tabindex="0">
                            Fruit Roll Ups
                        </li>
                        <li class="mdc-list-item" role="option" id="cotton-candy" tabindex="0">
                            Candy (cotton)
                        </li>
                        <li class="mdc-list-item" role="option" id="vegetables" aria-disabled="true" tabindex="0">
                            Vegetables
                        </li>
                        <li class="mdc-list-item" role="option" id="noodles" tabindex="0">
                            Noodles
                        </li>
                    </ul>
                </div>
            </div>

CSS：

.mdc-select {
    width: 200px;
}

和 JS：

var select = new mdc.select.MDCSelect(document.getElementById('js-select'));

使用此组件时，我是否遗漏了我应该做的事情？

4

1 回答 1

1

该mdc-simple-menu组件mdc-menu在版本 0.30.0 中已重命名。如果您只是simple-从代码中删除，它将起作用。

<div id="js-select" class="mdc-select" role="listbox">
  <div class="mdc-select__surface" tabindex="0">
    <div class="mdc-select__label">Food Group</div>
    <div class="mdc-select__selected-text"></div>
    <div class="mdc-select__bottom-line"></div>
  </div>
  <div class="mdc-menu mdc-select__menu">
    <ul class="mdc-list mdc-menu__items">
      <li class="mdc-list-item" role="option" id="fruit-roll-ups" tabindex="0">
        Fruit Roll Ups
      </li>
      <li class="mdc-list-item" role="option" id="cotton-candy" tabindex="0">
        Candy (cotton)
      </li>
      <li class="mdc-list-item" role="option" id="vegetables" aria-disabled="true" tabindex="0">
        Vegetables
      </li>
      <li class="mdc-list-item" role="option" id="noodles" tabindex="0">
        Noodles
      </li>
    </ul>
  </div>
</div>

https://codepen.io/williamernest/pen/LQdKJy

https://github.com/material-components/material-components-web/blob/master/CHANGELOG.md

于 2018-02-20T21:26:47.637 回答