使用 .dropdown() 实现错误下拉列表 - $ 不是函数答案

【问题标题】：Error dropdown materialize using .dropdown() - $ is not a function使用 .dropdown() 实现错误下拉列表 - $ 不是函数
【发布时间】：2017-12-09 18:04:57
【问题描述】：

我正在尝试使用指令在具体化中安装一个下拉列表，但是在运行代码控制台时会抛出一个错误

这是代码

//main.js
$(()=>{	
	alert("Hola de nuevo! Ahora con Materialize")
	console.log('Main cargando')
  $('.dropdown-button').dropdown();

})

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ejs Test</title>
	<link rel="stylesheet" href="css/materialize.css">
	<link rel="stylesheet" href="css/materialize.min.css">
		

	<script src="js/materialize.min.js"></script>
	<script src="js/jquery.js"></script>
	<script src="js/main.js"></script>

</head>
<body>

	<ul class="dropdown-content" id="dropdown1">
		<li>TextoPrueba</li>
		<li>TextoPrueba</li>
		<li>TextoPrueba</li>
	</ul>	
	<div class="navbar-fixed">
		<nav>
			<div class="nav-wrapper">
				<a href="#" class="brand-logo">BrandLogo</a>
				<ul class="right hide-on-med-and-down">
					<li><a href="#">Texto1</a></li>
					<li><a href="#">Texto2</a></li>
					<li><a href="#">Texto3</a></li>
					<li><a href="#" class="dropdown-button" data-activates="dropdown1">TextoDropDown</a></li>
				</ul>
			</div>
		</nav>
	</div>
</body>
</html>

在代码检查器的控制台中抛出我

未捕获的类型错误：$(...).dropdown 不是函数

如何正确显示下拉菜单？

【问题讨论】：

尝试将移到上方。跨度>

标签： javascript jquery materialize dropdown

【解决方案1】：

遇到同样的问题，在这里找到答案：https://github.com/krescruz/angular-materialize/issues/96#issuecomment-164877838

在我的例子中，它是包含 javascript 文件的顺序。 materialize.js 必须在 jquery 之后声明。

【讨论】：

【解决方案2】：

将下拉列表及其约束宽度添加为 false。

Materializecss dropdown documentation

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    
    
<!-- Dropdown Trigger -->
   <a class='dropdown-trigger ' href='#' data-target='dropdown1'  >Drop Me!</a> 

  <!-- Dropdown Structure -->
  <ul id='dropdown1' class='dropdown-content' >
    
    <li><a href="#!">You got something</a></li>
        
    <li><a href="#!">Extra stuff</a></li>
    
 
    <li><a href="#!">You don't have notfications</a></li>
 
  </ul>
  
  <script>
   
   $(document).ready(function () {
 
  $('.dropdown-trigger').dropdown({
    constrainWidth:false,
  }); 
  
  
  });
  
  
</script>

【讨论】：

【解决方案3】：

只有在动态创建下拉列表时才需要对下拉列表进行 jQuery 初始化。

这就够了：

<!-- Dropdown Trigger -->
  <a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>

  <!-- Dropdown Structure -->
  <ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
    <li class="divider"></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>

【讨论】：