toggle doesn't work correctly

Question

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

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

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?

I think You've enclosed your logic in `$(document).ready(function(){ //here });` Or `jQuery(document).ready(function(){ //Here });`? if not enclose it within that. — Vedant Terkar, Oct 15 '13 at 19:01
It is preferred that you use a site like http://jsfiddle.com rather than giving us a link to (for me, a foreign) external site. Otherwise, post all relevant code here so that people can recreate it. — Gray, Oct 15 '13 at 19:02
@Gray Given that it's likely that VedantTerkar is correct, putting this particular code on jsfiddle would have obscured the issue (because fiddles are automatically wrapped in a ready event) — Ryan Kinal, Oct 15 '13 at 19:04
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. — iCollect.it Ltd, Oct 15 '13 at 19:06
@RyanKinal I was just saying that I wont personally visit an external site to help with stuff like this. I was going to explain why I felt this was helpful, but this site does it better: http://sscce.org/ . (I realize the irony in giving you an external link when that is exactly what I am complaining about). The asker may very well have solved it themselves if they did that. — Gray, Oct 15 '13 at 19:11
@Gray And I do understand the "SSCCE" concept. I think it's quite valuable (and, for better or for worse, I often won't bother with questions that don't include them). But in this specific case, JSFiddle in particular could have obscured the problem, and the external (foreign for me as well) site could have been one such SSCCE. — Ryan Kinal, Oct 15 '13 at 19:15
@RyanKinal Fair enough. I feel like if a fiddle were posted, it looks like it would have worked. So the question would have been: why does my code work in jsfiddle, but not my site: . But then the asker could have searched and found this: http://stackoverflow.com/questions/15353535/code-is-working-on-fiddle-but-not-on-website, solved their problem, and upvoted the question/answer. Anyway, I understand your point, and I think you get what I was saying. — Gray, Oct 15 '13 at 19:20
Good point as well! And yeah, I'm skeptical of foreign sites as well (though, honestly, more often ones with a `.ru` tld) — Ryan Kinal, Oct 15 '13 at 19:21

score 2 · Accepted Answer · answered Oct 15 '13 at 19:09

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


});

toggle doesn't work correctly

1 Answers1

e.g.