如何在点击时用html选择保持打开mdl-menu?

时间:2017-02-12 02:39:51

标签: html css material-design-lite

这是一个正在发生的事情的示例,当点击菜单中的下拉列表时,菜单被取消。提前致谢



<build>
    <plugins>
        <plugin>
            <groupId>org.codehaus.mojo</groupId>
            <artifactId>cobertura-maven-plugin</artifactId>
            <version>2.7</version>
            <executions>
                <execution>
                    <id>cobertura</id>
                    <phase>test</phase>
                    <goals>
                        <goal>cobertura</goal>
                    </goals>
                    <configuration>
                        <formats>
                            <format>xml</format>
                            <format>html</format>
                        </formats>
                    </configuration>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>
&#13;
#menu{
    margin: 0 auto; 
}
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:3)

document.querySelector('.mdl-menu').addEventListener('click', function(event) {
  event.stopPropagation();
});

&#13;
&#13;
document.querySelector('.mdl-menu').addEventListener('click', function(event) {
  event.stopPropagation();
});
&#13;
#menu{
    margin: 0 auto; 
}
&#13;
<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>
&#13;
&#13;
&#13;