I'm trying to build a horizontal accordion with Jquery. It seems to be working "ok" in Firefox. But in Webkit (Safari 3 + 4, and Chrome) the sub-level UL flashes after the Hide function. Any help would be greatly appreciated. To see a working demo: http://ableobject.com/horaccordion1.html
Here is what I'm working on:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<title>untitled</title>
<style type="text/css">
#container {
display: table;
margin: 0 auto;
text-align: center; /* for IE */
}
ul{
list-style: none;
background-color: yellow;
margin: 0;
padding: 0;
float: left;
height: 20px; /* For testing */
}
ul li {
background-color: aqua;
float: left;
}
ul li ul {
background-color: blue;
display: none;
}
ul li ul li {
background-color: green;
}
a, a:link, a:hover, a:visited, a:active {
color: black;
text-decoration: none;
float: left;
}
</style>
<script type="text/javascript">
/* Care of Hunter Daley */
var $current = null;
$(document).ready(function(){
$("ul li ul").hide(); // hide submenus by default on load
$("ul li a").click(function(){
var $sub = $(this).next();
if ($sub.css("display") == "none")
{
if ($current != null)
$current.animate({ width: 'hide' }); // if you want to only show one sub at a time
$sub.animate({ width: 'show' });
$current = $sub;
}
else
{
$sub.animate({ width: 'hide' });
$current = null;
}
});
});
</script>
</head>
<body>
<div id="container">
<ul>
<li>
<a href="#">Top-level 1</a>
</li>
<li>
<a href="#">Top-level 2</a>
<ul>
<li><a href="#">Bottom Level A1</a></li>
<li><a href="#">Bottom Level A2</a></li>
<li><a href="#">Bottom Level A3</a></li>
<li><a href="#">Bottom Level A4</a></li>
</ul>
</li>
<li>
<a href="#">Top-level 3</a>
<ul>
<li><a href="#">Bottom Level B1</a></li>
<li><a href="#">Bottom Level B2</a></li>
</ul>
</li>
<li>
<a href="#">Top-level 4</a>
</li>
</ul>
</div>
</body>
This sounds like it is related to an issue I had a little while ago with webkit. There is a webkit bug that sometimes causes an element's parent to revert to its original size after an animation that reduces the elements' width. After the animation, the element's parent jumps back to its original size in order to accommodate its content.
Edit: Removed comments about jQueryUI. Not sure why I thought you were using it.
The bug was discussed here , which details a workaround.
I submitted a bug report to jQuery as well.
Basically, you would need to simultaneously reduce the width of your $sub
element's parent by the same amount as $sub
is being reduced. So if the width of $sub
is 100px, there would be a separate animate()
to reduce the parent by 100px.
I haven't tested any of this with your example, but I think it is probably the key.
Edit 2: A new version using divs
CSS:
.title {
list-style: none;
margin: 0;
padding: 0;
float: left;
height: 32px; /* For testing */
font-family: helvetica;
font-size: 18px;
clip: auto; overflow: hidden;
}
.menu {
height: 32px; /* For testing */
clip: auto; overflow: hidden;
float: left;
}
a, a:link, a:hover, a:visited, a:active {
color: black;
text-decoration: none;
padding: 12px;
font-weight: 700;
float: left;
color: #222;
}
.menu a, .menu a:link, .menu a:hover, .menu a:visited, .menu a:active {
color: black;
text-decoration: none;
padding: 12px;
font-weight: normal;
float: left;
}
javascript:
// Prevents us from having to check for null.
var $current = $('#someFictionalElement');
var $previous = null;
$(document).ready(function(){
$(".menu").css({width: 0}); // hide submenus by default on load
$(".title").click(
function() {
$previous = $current;
$current = $(this);
var $currentMenu = $current.next();
$previous.next().animate({ width: 0 }, {duration: 1000, queue: false} );
// Make sure that if there's no menu text (like Top Level 1 and 4) that it does not animate.
// This is because of the pixels added for Firefox (see comment below)
if( $currentMenu.width() == 0 && $currentMenu.text() != '' ) {
// Expand the menu but keep it hidden so we can get its width
$currentMenu.css({visibility: 'hidden', width: ''});
// Store the width, and add a few pixels for Firefox
var currentWidth = $currentMenu.width() + 3;
// Make menu visible and set with to 0 in preparation for the animation
$currentMenu.css({visibility: 'visible', width: 0})
.animate({ width: currentWidth }, 1000);
}
});
$(".title a").hover(
function(){$(this).animate ({ opacity: 0.7 }, 200);},
function(){$(this).animate ({ opacity: 1 }, 600);}
);
});
HTML:
<body>
<div id="container">
<div class='title' id='level1'>
<a href="#">Top-level 1</a>
</div>
<div class='menu'></div>
<div class='title' id='level2'>
<a href="#">Top-level 2</a>
</div>
<div class='menu'>
<a href="#">Bottom Level A1</a>
<a href="#">Bottom Level A2</a>
<a href="#">Bottom Level A3</a>
<a href="#">Bottom Level A4</a>
</div>
<div class='title' id='level3'>
<a href="#">Top-level 3</a>
</div>
<div class='menu'>
<a href="#">Bottom Level B1</a>
<a href="#">Bottom Level B2</a>
</div>
<div class='title' id='level4'>
<a href="#">Top-level 4</a>
</div>
<div class='menu'></div>
</div>
</body>
I'm posting this as a separate answer just in case you still find the previous one useful.
Please note the following:
So here it is. Hope it helps!
CSS
#container {
margin: 0 auto 0 auto;
text-align: center;
display: table;
}
.menuContainer {
margin: 0;
padding: 0;
float: left;
height: 32px; /* For testing */
font-family: helvetica;
font-size: 18px;
clip: auto; overflow: hidden;
}
.menu {
height: 32px; /* For testing */
clip: auto; overflow: hidden;
float: left;
}
a, a:link, a:hover, a:visited, a:active {
color: black;
text-decoration: none;
padding: 12px;
font-weight: 700;
float: left;
color: #222;
}
.menu a, .menu a:link, .menu a:hover, .menu a:visited, .menu a:active {
color: black;
text-decoration: none;
padding: 12px;
font-weight: normal;
float: left;
}
javascript
var $currentMenuContainer = $('#someFictionalElement');
var $previousMenuContainer = null;
$(document).ready(function() {
// Iterate through each .menu element, setting the full width of each menu to a 'custom'
// attribute called 'fullWidth'. Since the full width should never change, this
// makes it easy to recall it quickly. You could use global variables instead.
// After setting 'fullWidth', it then collapses each menu and title.
$(".menu").each(function() {
var $theMenu = $(this);
var $theMenuContainer = $theMenu.parent();
$theMenu.attr({fullWidth: ($theMenu.width() + 3)}); // Add a few pixels for firefox
var menuContainerWidth = $theMenuContainer.width() - $theMenu.attr('fullWidth') + 6; // Add DOUBLE the pixels here
$theMenu.css({width: 0});
$theMenuContainer.css({width: menuContainerWidth});
});
$(".menuContainer a").click(
function() {
// Set the current and previous elements properly
$previousMenuContainer = $currentMenuContainer;
$currentMenuContainer = $(this).parent();
var $previousMenu = $previousMenuContainer.find('.menu');
var $currentMenu = $currentMenuContainer.find('.menu');
// Collapse the previous menu
$previousMenu.animate({ width: 0 }, {duration: 480, queue: false} );
// Subtract the width of the previous menuContainer's menu from the menuContainer (only if its menu is displayed)
if($previousMenu.width() > 0) $previousMenuContainer.animate({width: ('-=' + $previousMenu.attr('fullWidth'))}, 500);
// Expand the current menu and its menuContainer if it's not showing
if($currentMenu.width() == 0) {
// Increase the menuContainer width by the full width of its menu
$currentMenuContainer.animate({width: ('+=' + $currentMenu.attr('fullWidth'))}, 480);
// Increase the menuContainer to its full width
$currentMenu.animate({ width: $currentMenu.attr('fullWidth') }, 500);
}
});
$(".menuContainer a").hover(
function(){$(this).animate ({ opacity: 0.7 }, 200);},
function(){$(this).animate ({ opacity: 1 }, 600);}
);
});
HTML
<div id="container">
<div class='menuContainer'>
<a href="#">Top-level 1</a>
</div>
<div class='menuContainer'>
<a href="#">Top-level 2</a>
<div class='menu'>
<a href="#">Bottom Level A1</a>
<a href="#">Bottom Level A2</a>
<a href="#">Bottom Level A3</a>
<a href="#">Bottom Level A4</a>
</div>
</div>
<div class='menuContainer'>
<a href="#">Top-level 3</a>
<div class='menu'>
<a href="#">Bottom Level B1</a>
<a href="#">Bottom Level B2</a>
</div>
</div>
<div class='menuContainer'>
<a href="#">Top-level 4</a>
</div>
</div>
Edit: Add the following DTD to the top of your page-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.