Material Design Lite导航
Material Design Lite导航
提问于 2015-07-11 05:48:44
如何在导航中创建子菜单项？
<!-- Navigation -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>我不能对它使用<ul> <li>。什么是正确的类？
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-07-11 16:28:37
MDL似乎还不支持本机的子菜单。但是，有一些菜单类可以用作子菜单：
http://www.getmdl.io/components/index.html#menus-section
因此，在您的代码中，您可能如下所示：
<!-- Left aligned menu below button -->
<nav class="mdl-navigation">
<a id="submenu" class="mdl-navigation__link" href="#">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
<!-- sub menu only visible when clicked on the link above -->
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
for="submenu">
<li class="mdl-menu__item">Some Action</li>
<li class="mdl-menu__item">Another Action</li>
<li disabled class="mdl-menu__item">Disabled Action</li>
<li class="mdl-menu__item">Yet Another Action</li>
</ul>确保href中有#。
Stack Overflow用户
发布于 2016-03-31 22:54:00
如果您还使用angular.js：
<nav class="mdl-navigation">
<!-- link -->
<a ng-click="showme = ! showme" class="mdl-navigation__link" href="#">Link</a>
<!-- sub menu -->
<nav class="mdl-navigation" ng-show="showme">
<a class="mdl-navigation__link">Sublink 1</a>
<a class="mdl-navigation__link">Sublink 2</a>
</nav>
</nav>如果你不使用angular.js，而是经典的jquery，你可以这样做：
<nav class="mdl-navigation">
<!-- link -->
<a href="#" id="mainlink" class="mdl-navigation__link">Link</a>
<!-- sub menu -->
<nav id="submenu" class="mdl-navigation">
<a class="mdl-navigation__link">Sublink 1</a>
<a class="mdl-navigation__link">Sublink 2</a>
</nav>
</nav>
<script>
$(document).ready(function() {
$("#mainlink").click(function() {
$('#submenu').toggle('show');
});
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31350822
复制相关文章
相似问题
腾讯云开发者
