Hi,
I'm having a problem with jquery's toggle function in Safari 3.1.2 and
Google Chrome, maybe one of you knows the issue and can help...
Here's the code:
*******CODE
//For each menu button, toggle its child div (containing child menu
items) while hiding the others if they are open
$(document).ready(function(){
$('div.menuchild').hide();
$("a.menuchild_1").click(function(){
$("div#menuchild_1").toggle();
$("div#menuchild_2:visible").hide();
$("div#menuchild_3:visible").hide();
return false;
});
$("a.menuchild_2").click(function(){
$("div#menuchild_2").toggle();
$("div#menuchild_1:visible").hide();
$("div#menuchild_3:visible").hide();
return false;
});
$("a.menuchild_3").click(function(){
$("div#menuchild_3").toggle();
$("div#menuchild_1:visible").hide();
$("div#menuchild_2:visible").hide();
return false;
});
});
********/CODE
All div#menuchild_1,2,3 have a background-image. They also contain
another div that closes that background at the top (think rounded
corners).
Now I'm sure this could be done more quickly using variables and not
hardcoding it :) But it works fine for now - except for Safari and
Chrome:
- In Safari, the div#menuchild_1,2,3 that pop up are broken
(background-image doesn't show fully) UNTIL you move the mouse over
the div. This means that the background image isn't positioned
correctly (it's set to "no-repeat bottom left"), but somewhere in the
vertical middle of the div. Also, the contained div doesn't show at
all before the mouse moves over it.
- Google Chrome seems to work but regularly crashes ("Snap, something
went wrong...") when you try to click on the parent menu items
repeatedly and quickly.
Not sure if Webkit is having a problem here or if my code is... emm...
worthy of improvement. Any help will be appreciated!
