jquery - 切换无法正常工作

Question

我已经实现了一个toggle事件，但它不能正常工作。

这是我的测试站点（在浏览器中查看 550px 宽度）：

http://devel.hoevermann-gruppe.de/

如果您单击搜索玻璃图标，您将看到该错误。

这是我的代码：

jQuery("#search_icon").click(function(){
    $('.search_mobil').slideToggle();
});

我可以做得更好吗？也许用slideDownand slideUp？

有没有人有任何想法？

Answer 1

您正在此单击事件中添加切换单击事件$('ul.menu > li > a').click(function(e)。它应该在该事件之外，因为它会在每次单击时不断添加处理程序的新实例。

例如

$(document).ready(function() {
    $('ul.menu > li > a').click(function(e) {
        var _this = $(this);
        var _thisLi = _this.parent();
        if(_thisLi.hasClass('naventry')) {
            e.preventDefault();
            $('div.submenu-container, div.greybox').hide();
            var $submenu = _this.parent().find('div.submenu-container');

            // Wenn schon Aktiv ist einfach nurnoch schließen
            if(_thisLi.hasClass('active')) {
                _thisLi.removeClass('active');
                return;
            }

            _thisLi.parent().children().removeClass('active');

            $submenu.show();
            $('div.greybox').show();

            _thisLi.addClass('active');         
        }
        else if (_thisLi.hasClass('navbutton')) {
            e.preventDefault();
            $('ul.menu > li.naventry').toggleClass('navactive');
        }
    });

    // Place this after the previous event (not inside it)
    jQuery("#search_icon").click(function(){
        $('.search_mobil').slideToggle();
    });

    $("ul.submenu li, li.naventry").hover(function(){
        $(this).toggleClass('navihover', 300);
    },function(){
        $(this).toggleClass('navihover', 300);
    });


});