我按照https://materializecss.com/dropdown.html的說明進行操作，仍然無法讓此下拉菜單正常工作。$(document).ready(function() { $('.dropdown-trigger').dropdown();});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script><!-- Compiled and minified JavaScript --><script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script><!-- Compiled and minified CSS --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><a href="#" class="waves-effect dropdown-trigger" id="dropdown" data-target="dropdown"><i class="material-icons">notifications</i></a><!-- Dropdown Structure --><ul id="dropdown" class="dropdown-content"> <li><a href="#!">one</a></li> <li><a href="#!">two</a></li> <li class="divider" tabindex="-1"></li> <li><a href="#!">three</a></li> <li><a href="#!"><i class="material-icons">view_module</i>four</a></li> <li><a href="#!"><i class="material-icons">cloud</i>five</a></li></ul></li>
1 回答
素胚勾勒不出你
TA貢獻1827條經驗 獲得超9個贊
請您檢查一下好嗎？我發現您的代碼中某些項目的放置位置錯誤li。而且你也沒有包括jquery. 否則這里一切正常。
$(document).ready(function() {
$('.dropdown-trigger').dropdown();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
</script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<a class='dropdown-trigger waves-effect' href='#' data-target='dropdown1'><i class="material-icons">notifications</i></a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider" tabindex="-1"></li>
<li><a href="#!">three</a></li>
<li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
<li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
</ul>
- 1 回答
- 0 關注
- 147 瀏覽
添加回答
舉報
0/150
提交
取消