我在下面的代码片段中实现了一个多选下拉菜单。看起来效果很好。但是，每次我选择一个项目时，菜单都会关闭。我希望菜单保持打开状态，直到用户单击“完成”按钮。
奇怪的是，如果我取消选择一个项目，菜单会保持打开状态，但如果我选择一个项目，菜单就会关闭。
html, body {
height: 100%;
}
body {
overflow: hidden;
margin: 0;
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
}
paper-button {
margin: 20px;
}<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Polymer</title>
<base href="http://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="paper-menu/paper-menu.html">
</head>
<body>
<foo-drop ></foo-drop>
<dom-module id="foo-drop">
<template>
<paper-dropdown-menu label="Your favourite pastry">
<paper-menu id="myMenu" class="dropdown-content" multi>
<paper-item>Croissant</paper-item>
<paper-item>Donut</paper-item>
<paper-item>Financier</paper-item>
<paper-item>Madeleine</paper-item>
</paper-menu>
</paper-dropdown-menu>
</template>
<script>
Polymer({
is: "foo-drop",
ready: function() {
window.addEventListener('WebComponentsReady', function() {
var menu = document.querySelector("#myMenu");
menu.addEventListener("iron-select", function(e, detail){
console.log(menu.selected);
console.log(menu.selectedItems.length);
for (var i = 0; i < menu.selectedItems.length; i++)
console.log(menu.selectedItems[i].value);
});
});
}
});
</script>
</dom-module>
</body>
</html>最佳答案
paper-dropdown-menu中菜单的关闭/打开控制使用paper-menu-button。
https://github.com/PolymerElements/paper-dropdown-menu/blob/master/paper-dropdown-menu.html#L150
规范规定将 ignoreSelect 设置为 true。
https://elements.polymer-project.org/elements/paper-menu-button
这里有一个错误 https://github.com/PolymerElements/paper-menu-button/issues/58
但也许适用于您的环境(至少适用于 Chrome 和 Firefox)。检查忽略选择在“多选纸质菜单”中是否有效
https://elements.polymer-project.org/elements/paper-menu-button?view=demo:demo/index.html&active=paper-menu-button
如果是，则从 paper-dropdown-menu 获取底层 paper-menu-button 并设置 ignoreSelect = true；
与
<paper-dropdown-menu id="id_my-paper-dropdown-menu">
集合 ignoreSelect 应该设置如下(我主要在 Dart 框架中工作):
this.$.id_my-paper-dropdown-menu.$.menuButton.ignoreSelect = true;
关于polymer-1.0 - 防止菜单在多选纸张下拉菜单上关闭。聚合物1.0，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36268725/