Question

我正在尝试使用材质设计创建一个包含子列表的列表。在此，当我点击子列表标题时，它不会扩展。但是主标题得到了扩展。我认为可折叠功能不适用于内部标题。我不知道我做错了什么。

＆＃13;

<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>List</title>

  <link href="css/materialize.min.css" rel="stylesheet" type="text/css">
  <link href="css/style.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body class="blue-grey lighten-5">


  <div class="center-align">
    <ul class="collapsible" data-collapsible="accordion">

      <li>

        <div class="collapsible-header waves-effect waves-grey">User Management</div>
        <div class="collapsible-body">
          <ul>
            <li><a href="#listuser">List User</a>
            </li>
            <li><a href="#createuser">Create User</a>
            </li>
            <li><a href="#updaterole">Update User Role</a>
            </li>
            <li><a href="#deleteuser">Delete User</a>
            </li>
            <li>
              <div class="collapsible-header waves-effect waves-grey">Role Management</div>
              <div class="collapsible-body">
                <ul>
                  <li><a href="#addrole">Add Role</a>
                  </li>
                  <li><a href="#listofroles">Edit Role</a>
                  </li>
                  <li><a href="#deleterole">Delete Role</a>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>

  <script src="js/jquery-3.1.1.js"></script>
  <script src="js/materialize.min.js"></script>
  <script src="js/angular.min.js"></script>
  <script src="js/angular-route.min.js"></script>
  <script src="js/angular-resource.min.js"></script>
  <script src="js/angular-animate.min.js"></script>
  <script src="js/app.js"></script>
</body>

</html>

＆＃13;

Answer 1

正如您所说，您还没有使用任何J，这意味着您尚未初始化可折叠。在您，自定义Js添加以下内容。

$(document).ready(function(){
    $('.collapsible').collapsible();
  });

请仔细阅读文档。 http://materializecss.com/collapsible.html

可折叠的子列表在材料设计中不起作用

1 个答案: