Materialize Collapsible Navが動作しない

折りたたみ可能なドロップダウンメニューが機能しない理由は完全にわかりません。私はmaterializeとjQueryをインポートしていますが、どちらも動作していますが、折りたたみ可能なメニューはクリックされても何もしません。Materialize Collapsible Navが動作しない

<!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のことで、初期化に依存しています）doesntの

出典

2017-07-27 22:28:47

は、問題を修正するように見えます。私は以前にそれを持っていただけでそれを読んだ。同じ結果。 – FossProgramBoss

jQueryのバージョンが古すぎます。これを試してください： '' あなたのコードに基づいた作業ペン、私のjQueryスニペットと更新されたjQueryのバージョンだけを追加しました： https://codepen.io/anon/pen/zdvKbe –

私はそれを捕まえていないと信じられません！本当にありがとう！ – FossProgramBoss

Materialize Collapsible Navが動作しない

答えて

関連する問題