单击时如何使用 html select 打开 mdl-menu?
How keep open mdl-menu with html select when it's click?
这是发生的情况的示例,当单击菜单中的下拉列表时,菜单被关闭。提前致谢
#menu{
margin: 0 auto;
}
<link href="https://code.getmdl.io/1.3.0/material.light_blue-blue.min.css" rel="stylesheet"/>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<nav class="mdl-navigation">
<button id="menu" class="mdl-button mdl-js-button mdl-button--icon" style="background-color:blue">
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="menu" id="ul_container">
<p>DropDownList</p>
<li>
<select name="Select">
<option value="0">Option_0</option>
<option value="1">Option_1</option>
<option value="2">Option_2</option>
<option value="3">Option_3</option>
<option value="4">Option_4</option>
<option value="5">Option_5</option>
</select>
</li>
</ul>
</nav>
document.querySelector('.mdl-menu').addEventListener('click', function(event) {
event.stopPropagation();
});
document.querySelector('.mdl-menu').addEventListener('click', function(event) {
event.stopPropagation();
});
#menu{
margin: 0 auto;
}
<link href="https://code.getmdl.io/1.3.0/material.light_blue-blue.min.css" rel="stylesheet"/>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<nav class="mdl-navigation">
<button id="menu" class="mdl-button mdl-js-button mdl-button--icon" style="background-color:blue">
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="menu" id="ul_container">
<p>DropDownList</p>
<li>
<select name="Select">
<option value="0">Option_0</option>
<option value="1">Option_1</option>
<option value="2">Option_2</option>
<option value="3">Option_3</option>
<option value="4">Option_4</option>
<option value="5">Option_5</option>
</select>
</li>
</ul>
</nav>
这是发生的情况的示例,当单击菜单中的下拉列表时,菜单被关闭。提前致谢
#menu{
margin: 0 auto;
}
<link href="https://code.getmdl.io/1.3.0/material.light_blue-blue.min.css" rel="stylesheet"/>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<nav class="mdl-navigation">
<button id="menu" class="mdl-button mdl-js-button mdl-button--icon" style="background-color:blue">
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="menu" id="ul_container">
<p>DropDownList</p>
<li>
<select name="Select">
<option value="0">Option_0</option>
<option value="1">Option_1</option>
<option value="2">Option_2</option>
<option value="3">Option_3</option>
<option value="4">Option_4</option>
<option value="5">Option_5</option>
</select>
</li>
</ul>
</nav>
document.querySelector('.mdl-menu').addEventListener('click', function(event) {
event.stopPropagation();
});
document.querySelector('.mdl-menu').addEventListener('click', function(event) {
event.stopPropagation();
});
#menu{
margin: 0 auto;
}
<link href="https://code.getmdl.io/1.3.0/material.light_blue-blue.min.css" rel="stylesheet"/>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<nav class="mdl-navigation">
<button id="menu" class="mdl-button mdl-js-button mdl-button--icon" style="background-color:blue">
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="menu" id="ul_container">
<p>DropDownList</p>
<li>
<select name="Select">
<option value="0">Option_0</option>
<option value="1">Option_1</option>
<option value="2">Option_2</option>
<option value="3">Option_3</option>
<option value="4">Option_4</option>
<option value="5">Option_5</option>
</select>
</li>
</ul>
</nav>