Question

如何在导航中制作子菜单项？

<!-- 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>。什么是正确的课程？

Answer 1

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里面有＃。

Answer 2

如果你也使用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>

Material Design Lite导航

2 个答案: