Materialize - DropDown onclick исчезает Проблема

Question

Я использую ниже HTML, который является Dropdown. При нажатии на значок меню DropDown появляется, но не исчезает при повторном нажатии значка.

Если я нажму еще на другом месте, на странице исчезнет Dropdown.

<nav style="position: fixed;"> 

      <!-- Dropdown Trigger --> 
      <a href='#' data-activates='dropdown1' id="mainMenu" class="menu-dropdown"> 
       <i class="mdi-navigation-menu"></i> 
      </a> 

      <!-- Dropdown Structure --> 
      <div id='dropdown1' class='dropdown-content container'> 
       <div class="row icon-container"> 
        <div class="col s4 center-align"> 
         <i class="mdi-action-dashboard"></i> 
        </div> 
        <div class="col s4 center-align"> 
         <i class="mdi-action-perm-phone-msg"></i> 
        </div> 
        <div class="col s4 center-align"> 
         <i class="mdi-action-perm-scan-wifi"></i> 
        </div>  
       </div> 
      </div> 
</nav> 

----- Добавлено

$('.menu-dropdown').dropdown({ 
       inDuration: 300, 
       outDuration: 225, 
       constrain_width: false, // Does not change width of dropdown to that of the activator 
       hover: false, // Activate on hover 
       gutter: 0, // Spacing from edge 
       belowOrigin: true, // Displays dropdown below the button 
       closeOnClick: true 
      }); 

Как исчезнуть Dropdown на иконе Нажмите?

Answer 1

Попробуйте это:

$('#mainMenu').on('click',function(){ 
$('#dropdown1').toggle(); 
}) 

Answer 2

Это без использования JQuery

<!-- Dropdown Trigger --> 
    <a href='#' onclick="toggleMenu('dropdown1')" data-activates='dropdown1' class="menu-dropdown"> 
     <i class="mdi-navigation-menu">erer</i> 
    </a> 

    <!-- Dropdown Structure --> 
    <div id='dropdown1' class='dropdown-content container'> 
     <div class="row icon-container"> 
      <div class="col s4 center-align"> 
       <i class="mdi-action-dashboard">ffse</i> 
      </div> 
      <div class="col s4 center-align"> 
       <i class="mdi-action-perm-phone-msg">fsefs</i> 
      </div> 
      <div class="col s4 center-align"> 
       <i class="mdi-action-perm-scan-wifi">fsefs</i> 
      </div> 
     </div> 

    <script> 
     function toggleMenu(id) { 
      var e = document.getElementById(id); 
      if (e.style.display == 'block' || e.style.display=='') { 
       e.style.display = 'none'; 
      } 
      else { 
       e.style.display = 'block'; 
      } 
     } 
    </script>