Меню jQuery складывается и разворачивается три раза

Question

Меню jQuery складывается и разворачивается три раза

0

У меня есть меню JavaScript, которое я хочу развернуть/свернуть, когда я #dropdown кнопку #dropdown. Во-первых, для его развертывания потребовалось три клика, и после этих трех щелчков он работал отлично. Я отредактировал мой код, я должен щелкнуть его три раза, чтобы он работал, но после этого каждый клик делает меню разворачиваться/разворачиваться три раза подряд.

buttonClickHandler

function buttonClickHandler(e) {
    e.preventDefault();
    $(document).ready(function(){
        $('#main').hide();
        $('a#dropdown-button').click(function(){
            $('#main').toggle(function(){
                $('#main').addClass('active').fadeIn();
            }, function(){
                $('#main').removeClass('active').fadeOut();
                return false;
            });
        });
    });
}

В этом

function init(){
    var button = document.getElementById('dropdown-button');
    button.addEventListener("click", buttonClickHandler, false);
}

window.addEventListener("load", init, false);

HTML

<section id="nav-bar">
            <figure>
                <span class="helper"></span><img src="img/Logo.png" alt="Zien Woningmarketing"/>
            </figure>
            <a href="#" id="dropdown-button"><img src="img/Menu.png" alt="Menuknop: open het menu"/></a>
        </section>
        <nav id="main">
            <ul id="firstLevel">
                <li><a href="index.html">Home</a></li>
                <li><a href="fotografie.html">Producten</a></li>
                <li><a href="marketing.html">Woningmarketing</a></li>
                <li><a href="over.html">Over Zien!</a></li>
                <li><a href="werkwijze.html">Werkwijze</a></li>
            </ul>
            <ul>
                <li class="login"><a href="#">Inloggen</a></li>
                <li><a href="#">Registreren</a></li>
            </ul>
        </nav>

Ссылка на JSFiddle

Дело в том, что это меню должно легко упасть, тем самым показывая его содержимое.

user3239713 19 фев. 2014, в 11:45

Источник

0

я не думаю, что это хорошая идея, чтобы поместить функцию document.ready внутри другой функции
user2167382 19 фев. 2014, в 10:33
0

Когда я удаляю документ. К сожалению, он все еще не работает так, как предполагалось. Теперь мне нужно дважды щелкнуть, чтобы отобразить меню, но оно автоматически закрывается снова.
user3239713 19 фев. 2014, в 10:44

Теги:

javascript

jquery

html

css

2 ответа

Ещё вопросы

я не думаю, что это хорошая идея, чтобы поместить функцию document.ready внутри другой функции
Когда я удаляю документ. К сожалению, он все еще не работает так, как предполагалось. Теперь мне нужно дважды щелкнуть, чтобы отобразить меню, но оно автоматически закрывается снова.

mattts · Answer 1 · 2014-02-19T08-55-00.000Z

Надеюсь, что эта помощь: http://jsfiddle.net/x7xu4/2/

$(function(){
$("a#dropdown-button").on("click",function(event ){
    $("#main").toggleClass('active').fadeToggle();
    event.preventDefault();
});});

Поскольку вы используете jquery 2.1, вместо "click" используйте "on", поскольку он сохраняет немного памяти, и я отредактировал ваш код для более простого решения.

Большое спасибо, это действительно близко! Мне нужно только нажать два раза в моей собственной настройке, чтобы открыть меню, это ошибка кодирования на моей стороне?
хм интересно. Если вы можете поделиться полной ссылкой на проект, я мог бы помочь вам :). Это может быть проблема css или даже одна из ваших функций.

user2167382 · Answer 2 · 2014-02-19T08-10-00.000Z

Я упрощаю ваш код

    $(function(){
       $('a#dropdown-button').click(function(){
           if(!$('#main').hasClass('active')){
           $('#main').addClass('active');
           $('#main').show();
       }else {
           $('#main').removeClass('active');
           $('#main').hide();
       }
       return false;
     });
    });

Вот пример jsFiddle

Большое спасибо за ответ! К сожалению, по-прежнему нужно нажать три раза, чтобы открыть его, и мне нужно щелкнуть два раза, чтобы закрыть и открыть снова.