Q: Error dropdown materialize using .dropdown() - $ is not a function I am triying to install a dropdown in materialize using instructions but when ran the code console throw me an error
This is the code


//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>


in the  console of the code inspector throw me 
Uncaught TypeError: $(...).dropdown is not a function
what can i do to show the dropdown correctly?

A: Had the same problem and found the answer here: https://github.com/krescruz/angular-materialize/issues/96#issuecomment-164877838
In my case it was the order of javascript files include. materialize.js must be declared after jquery. 

A: Add drop-down and their constrainWidth to 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>



A: jQuery initialization for dropdowns is only necessary if you create them dynamically.
This should be enough:


<!-- 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>


