Reputation: 227
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
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.
$(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