gpt4 book ai didi

javascript - Materialise 可折叠导航不工作

转载 作者:行者123 更新时间:2023-11-28 15:25:19 26 4
gpt4 key购买 nike

我不完全确定为什么我的可折叠下拉菜单不起作用。我已经导入了 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>

最佳答案

在底部之前添加:

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

(可折叠功能依赖于 jQuery 的初始化)

关于javascript - Materialise 可折叠导航不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45361997/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com