jquery - Materialise - DropDown onclick 消失问题

Question

我正在使用下面的 HTML，它是一个 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>

----- 已添加<​​/p>

$('.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
            });

如何在点击图标时让下拉菜单消失？

Answer 1

试试这个:

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