Материализиране - падащо меню при щракване изчезва Проблем

Използвам по-долу HTML, който е Dropdown. При щракване върху иконата на менюто падащото меню изскача перфектно, но не изчезва при повторно щракване върху иконата.

Ако щракна другаде на страницата, Dropdown изчезва.

<nav style="position: fixed;">

            <!-- Dropdown Trigger -->
            <a href='/bg#' 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
            });

Как да изчезна падащото меню при щракване върху икона?


material-design html drop-down-menu jquery css
person Anup    schedule 28.04.2015    source източник
comment
можете ли да създадете цигулка за наша справка   -  person Kawinesh SK    schedule 28.04.2015
comment
Имам този проблем, решен с актуализирани materialize.js и materialize.min.js.   -  person Azzo    schedule 08.10.2017

Отговори (2)


arrow_upward
1
arrow_downward

Опитайте тази:

$('#mainMenu').on('click',function(){
 $('#dropdown1').toggle();
})
person madalinivascu    schedule 28.04.2015
comment
Моля, вижте редактирания ми въпрос...използвам .dropdown({}) за инициализиране на падащото меню. - person Anup; 28.04.2015

arrow_upward
1
arrow_downward

Това е без използването на jQuery

    <!-- Dropdown Trigger -->
    <a href='/bg#' 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>
person Chace Hwanjoo Kim    schedule 28.04.2015
comment
Това би било същото поведение без използване на jQuery - person Chace Hwanjoo Kim; 28.04.2015