材料组件菜单的` `setAbsolutePosition()`没有正常工作？
材料组件菜单的` `setAbsolutePosition()`没有正常工作？
提问于 2018-11-26 12:30:17
我试图使用MDCMenu's docs中的menu.setAbsolutePosition(0, 100);方法，将"mdc-menu“相对(下面)定位到我的顶部栏上的一个溢出按钮，但它似乎没有做太多事情(实际上使元素停留在屏幕之外)，不管我设置了什么值。
我创建了一个代码片段来说明这个问题：
<link rel="stylesheet" type="text/css" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<header class="mdc-top-app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">Title</span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<div id="demo-menu" class="mdc-menu-surface--anchor">
<a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="More" alt="More">more_vert</a>
<div class="mdc-menu mdc-menu-surface">
<ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
<li class="mdc-list-item" role="menuitem">
<span class="mdc-list-item__text">A Menu Item</span>
</li>
</ul>
</div>
</div>
</section>
</div>
</header>
<script>
var MDCMenu = mdc.menu.MDCMenu.attachTo(document.querySelector('.mdc-menu'));
MDCMenu.open = true;
// MDCMenu.hoistMenuToBody();
MDCMenu.setAbsolutePosition(0, 100);
</script>
回答 1
Stack Overflow用户
发布于 2018-11-30 03:37:00
您正在通过将setAbsolutePosition包装在mdc-menu-surface--anchor中来覆盖MDC menu。下面的示例删除了锚点元素，以便您可以使用setAbsolutePosition。
const bar = mdc.topAppBar.MDCTopAppBar.attachTo(document.querySelector('.mdc-top-app-bar'));
const menu = mdc.menu.MDCMenu.attachTo(document.querySelector('.mdc-menu'));
menu.setAbsolutePosition(0, 100);
menu.open = true;
document.querySelector('#menu-button').addEventListener('click', () => {
menu.open = !menu.open;
});<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>
<body>
<header class="mdc-top-app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button" aria-label="Open navigation menu">menu</button>
<span class="mdc-top-app-bar__title">Title</span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<button id="menu-button" class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Open menu">more_vert</button>
</section>
</div>
</header>
<div class="mdc-menu mdc-menu-surface">
<ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
<li class="mdc-list-item" role="menuitem">
<span class="mdc-list-item__text">A Menu Item</span>
</li>
</ul>
</div>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53474797
复制相关文章
相似问题
腾讯云开发者
