Question

我已经实施了toggle事件，但它无法正常运行。

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

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

这是我的代码：

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

我可以做得更好吗？也许使用slideDown和slideUp？

有没有人有任何想法？

Answer 1

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

e.g。

$(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);
    });


});

切换无法正常工作

1 个答案:

e.g。