0
私はJqueryで水平アコーディオンを構築しようとしています。それはFirefoxで "ok"で動作しているようです。しかしWebkit（Safari 3 + 4、およびChrome）では、Hideレベルの機能の後にサブレベルのULが点滅します。どんな助けでも大歓迎です。作業のデモを参照するには：ここではhttp://ableobject.com/horaccordion1.htmlJquery Horizontal Accordion Webkitバグ
は私が働いているものです：それは、私はWebKitのと少し前だった問題に関連しているよう
<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>
の先頭に次のDTDを追加します。まだ点滅しています。私はそれを把握して再投稿しようとします...しかし、現時点では解決策は私を逃れます。 多分： $ sub.parent（）。css（{width： ''}）; $ current = $ sub; ？ – stapler
おかげさまでたくさんのpatrick – stapler
'list'要素の使用はどれくらい重要ですか？最終的にそれらを切り捨ててdivを使用した後、私はWebkitで動作するかなり簡潔なアコーディオンを考え出しました。 – user113716