Dave-88
Dave-88

Reputation: 227

toggle doesn't work correctly

I've implemented a toggle event, but it doesn't work correctly.

Here my testing site(view in browser 550px width):

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

If you click on the search glass icon, you'll see the bug.

Here my Code:

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

Can I make this better? Maybe with slideDown and slideUp?

Does anyone have any ideas?

Upvotes: 0

Views: 663

Answers (1)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

You are adding your toggle click event inside this click event $('ul.menu > li > a').click(function(e). It should be outside that event as it keeps adding a new instance of the handler on every click.

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


});

Upvotes: 2

Related Questions