如何解决如何在网络上使用 Material Design 下拉菜单?
我正在尝试使用本教程中表单上的 MDC 下拉菜单。
不幸的是,单击时下拉菜单没有打开。我怀疑 JavaScript 启动可能有问题。有人可以看看我的源代码吗?
来源:
<link href="https://unpkg.com/material-components-web@v5.0.0/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web@v5.0.0/dist/material-components-web.min.js"></script>
<link href="style/style.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
HTML:
<div class="mdc-select mdc-select--outlined">
<div class="mdc-select__anchor" aria-labelledby="outlined-select-label">
<span class="mdc-notched-outline">
<span class="mdc-notched-outline__leading"></span>
<span class="mdc-notched-outline__notch">
<span id="outlined-select-label" class="mdc-floating-label">Pick a Food Group</span>
</span>
<span class="mdc-notched-outline__trailing"></span>
</span>
<span class="mdc-select__selected-text-container">
<span id="demo-selected-text" class="mdc-select__selected-text"></span>
</span>
<span class="mdc-select__dropdown-icon">
<svg
class="mdc-select__dropdown-icon-graphic"
viewBox="7 10 10 5" focusable="false">
<polygon
class="mdc-select__dropdown-icon-inactive"
stroke="none"
fill-rule="evenodd"
points="7 10 12 15 17 10">
</polygon>
<polygon
class="mdc-select__dropdown-icon-active"
stroke="none"
fill-rule="evenodd"
points="7 15 12 10 17 15">
</polygon>
</svg>
</span>
</div>
JavaScript:
const select = new mdc.select.MDCSelect(document.querySelector('.mdc-select'));
select.listen('MDCSelect:change',() => { console.log(`Selected option at index ${select.selectedindex} with value "${select.value}"`); });
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。