マテリアライズ1.0でjavascriptを初期化する方法

愚かな質問をおかけして申し訳ありません。しかし、私のJSの知識は貧弱です。 JSを使用してマテリアライズコンポーネントを初期化する方法はわかりませんが、jqueryではうまく動作します。例えば、私はCollapsibleコンポーネントを使用したいと思います。 http://next.materializecss.com/collapsible.html マテリアライズ1.0でjavascriptを初期化する方法

<ul class="collapsible"> 
<li> 
    <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div> 
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> 
</li> 
<li> 
    <div class="collapsible-header"><i class="material-icons">place</i>Second</div> 
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> 
</li> 
<li> 
    <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div> 
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> 
</li> 
</ul>

と初期化

// JS 
var elem = document.querySelector('.collapsible'); 
var instance = new M.Collapsible(elem, options); 

    // Or with jQuery 

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

My code

出典

2017-12-12 Muhammad Jafar

ここでは何が効果がありませんか？ –

私はJSを初期化に使用していますが、ブラウザを検査するとエラーが表示されます Uncaught ReferenceError：オプションが定義されていません –

ライブラリが含まれていますか？あなたのスクリプトタグはどこですか？ –

ため、このお試しください：https://codepen.io/Astha25/pen/OzJpbQ

：ここcodepen作業を確認してください

<!DOCTYPE> 
<html> 
<head> 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.1/css/materialize.min.css" rel="stylesheet"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.1/js/materialize.min.js"></script> 

</head> 
<script> 
    var elem = document.querySelector('.collapsible'); 
    var instance = new M.Collapsible(elem, { 
    // inDuration: 1000, 
    // outDuration: 1000 
    }); 
</script> 
<body> 

<ul class="collapsible"> 
    <li> 
     <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div> 
     <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> 
    </li> 
    <li> 
     <div class="collapsible-header"><i class="material-icons">place</i>Second</div> 
     <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> 
    </li> 
    <li> 
     <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div> 
     <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> 
    </li> 
    </ul> 

</body> 
</html>

を

出典

2017-12-12 11:33:16

マテリアライズ1.0でjavascriptを初期化する方法

答えて

関連する問題