實現可摺疊導航不工作

我不完全確定爲什麼我的可摺疊下拉菜單不起作用。我已經導入了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

實現可摺疊導航不工作

回答

相關問題