实现可折叠导航不工作

我不完全确定为什么我的可折叠下拉菜单不起作用。我已经导入了materialize和jQuery，它们都可以工作，但是可折叠菜单在点击时不会做任何事情。实现可折叠导航不工作

<!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>Create</title> 
 
    <!-- Fonts --> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
 
    <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css"> 
 
    <link rel="stylesheet" type="text/css" href="css/materialize.css"> 
 
    <script src="js/materialize.js" type="text/javascript"></script> 
 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
    <!-- Styles --> 
 
    <style> 
 
     .panel { 
 
     height: 100vh; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div class="row"> 
 
     <div class="col m10 panel cyan"> 
 
     </div> 
 
     <div class="col m2 panel"> 
 
      <ul class="collapsible" data-collapsible="expandable"> 
 
       <li> 
 
        <div class="collapsible-header"><i class="material-icons">extension</i>Objects</div> 
 
        <div class="collapsible-body"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></div> 
 
       </li> 
 
       <li> 
 
        <div class="collapsible-header"><i class="material-icons">color_lens</i>Colors</div> 
 
        <div class="collapsible-body"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></div> 
 
       </li> 
 
       <li> 
 
        <div class="collapsible-header"><i class="material-icons">create</i>Create</div> 
 
        <div class="collapsible-body"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></div> 
 
       <li> 
 
        <div class="collapsible-header"><i class="material-icons">collections</i>Backdrops</div> 
 
        <div class="collapsible-body"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></div> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

来源

2017-07-27 FossProgramBoss

在底部前补充一点：

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

（可折叠功能的jQuery依赖于初始化）

来源

2017-07-27 22:28:47

这似乎没有解决这个问题。我之前有过，只是读过它。相同的结果。 – FossProgramBoss

你有一个太旧的jQuery版本。试试这个： '' 工作笔根据您的代码，只添加我的jQuery代码片段和更新的jQuery版本： https://codepen.io/anon/pen/zdvKbe –

不能相信我没有抓住！非常感谢！ – FossProgramBoss

实现可折叠导航不工作

回答

相关问题