Question

我正在尝试将mdc-select元素添加到我的页面，但无论我尝试做什么，选项始终可见。在观察其他人时，我甚至会看到这个问题。包含select组件的codepens。例如，这一个：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'));

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

Answer 1

版本0.30.0中mdc-menu组件已重命名为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>，它就会起作用。

Jan 25 2018 12:00:00

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

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

Material Components Web - 选择组件行为不正确

1 个答案: