2015-04-28 47 views
0

我正在使用下面的HTML,它是一个Dropdown。点击菜单图标后,DropDown弹出完美,但再次单击图标时不会消失。Materialise - DropDown onclick消失问题

如果我点击页面上的其他位置,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 
      }); 

如何消失的图标下拉点击?

+0

你能为我们创造参考小提琴 –

+0

我有这个问题,以更新materialize.js和materialize.min解决.js。 – Azzo

回答

1

试试这个:

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

请参阅我编辑的问题...我使用'.dropdown({})'初始化DropDown。 – Anup

1

这是无需使用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> 
+0

这将做同样的行为,而不使用jQuery –