Materialize - DropDown onclick消失问题答案

【问题标题】：Materialize - DropDown onclick disappear IssueMaterialize - DropDown onclick消失问题
【发布时间】：2015-07-07 04:24:01
【问题描述】：

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

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

【问题讨论】：

你能制作小提琴供我们参考吗
我有这个问题，通过更新 materialize.js 和 materialize.min.js 解决。

标签： jquery html css drop-down-menu material-design

【解决方案1】：

试试这个：

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

【讨论】：

请查看我编辑的问题...我正在使用 .dropdown({}) 来初始化 DropDown。

【解决方案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>

【讨论】：

不使用 jQuery 也会做同样的事情