可摺疊的子列表在材料設計中不起作用

我正在嘗試使用材料設計創建包含子列表的列表。在這裏，當我點擊子列表標題時，它不會展開。但主標題得到擴展。我認爲可摺疊功能不適用於內部標題。我不知道我做錯了什麼。可摺疊的子列表在材料設計中不起作用

<!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>

來源

2016-11-11 RAJAT GARG

請張貼您的JS – Samir

我沒有使用任何JS截至目前爲止。可摺疊的類在materialize.js文件中定義。 –

當你說你還沒有使用任何JS，那說明你還沒有初始化可摺疊。在你自定義的Js中添加以下內容。

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

請仔細參閱文檔。 http://materializecss.com/collapsible.html

來源

2016-11-11 17:28:25

是的，我也試着添加這個腳本。但它適用於父標題，而不適用於子標題。我在擴展子列表時遇到問題。順便說一句，謝謝。 –

可摺疊的子列表在材料設計中不起作用

回答

相關問題