Materialize - DropDown исчезает при щелчке

Я использую ниже 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
            });

Как убрать раскрывающийся список при нажатии на иконку?


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({}) для инициализации DropDown. - person Anup; 28.04.2015

arrow_upward
1
arrow_downward

Это без использования 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>
person Chace Hwanjoo Kim    schedule 28.04.2015
comment
Это будет делать то же самое без использования jQuery - person Chace Hwanjoo Kim; 28.04.2015