水平手风琴在 Safari 或 Chrome 中不起作用

Question

我确信我在这里遗漏了一些明显的东西，因为我对 jQuery 比较陌生。我正在尝试构建一个水平手风琴。到目前为止，它在 FF 中运行良好，但在 Safari 或 Chrome 中运行不佳。

在 Safari 和 Chrome 中，.content div 出现在各自的手风琴窗格下方，而不是保留其位置并显示宽度动画。

预先感谢您的任何帮助。

以下是示例的链接： http://www.billjordandesign.com/jQuery_tests/horizo​​ntal_accordion.html< /a>

这是我的 jQuery：

<script type="text/javascript">
$(document).ready(function() {

$('.content').hide();
$('.content:first').show(); 


$('a').click(function(){

 $('.content').hide();
 $(this).siblings('.content').animate({'width':'toggle'}, 'slow', 'easeOutBack')
  });

});

</script>

...这是我的 HTML：

<div id="navigation">

<ul>

<li><a href="#"><span><div class="pane"><div class="verticaltext">Home</div></div></span></a><div class="content">1</div></li>


<li><a href="#"><span>
<div class="pane"><div class="verticaltext">About</div></div></span></a><div class="content">2</div></li>


<li><a href="#"><span>
<div class="pane"><div class="verticaltext">Overview</div></div></span></a><div class="content">3</div></li>


<li><a href="#"><span>
<div class="pane"><div class="verticaltext">Services</div></div></span></a><div class="content">4</div></li>


<li><a href="#"><span>
<div class="pane"><div class="verticaltext">Contact</div></div></span></a><div class="content">5</div></li>

</ul>

</div>

...这是我的 CSS：

#navigation{
 position:absolute;
 display:block;
 top:100px;
 width:1000px;
 height:400px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:16px;
 color:#333;

}

#navigation a{
 font-family:Arial, Helvetica, sans-serif;
 font-size:16px;
 font-weight:bold;
 color:#FFF;

}

#navigation a:hover{
 font-family:Arial, Helvetica, sans-serif;
 font-size:16px;
 font-weight:bold;
 color:#FFF;


}


#navigation ul{
 margin:0;
 padding:0;
 height:400px;
 list-style-type:none;
 list-style-image:none;
}

#navigation li{
 display:inline;
 border-right:thin #FFF solid;
 float:left;

}

.pane{
 position:relative;
 display:block;
 height:400px;
 width:50px;
 background-color:#09F;
 float:left;
}

.verticaltext {
 position:absolute;
 display:block;
 width:50px;
 bottom:50px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:24px;
 font-weight:bold;
 color:#FFF;
 text-align:center;
 letter-spacing:-1px;
 -webkit-transform: rotate(-90deg); 
 -moz-transform: rotate(-90deg);
}

.content{
 position:relative;
 display:block;
 width:400px;
 height:400px;
 left:10px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#333;
 float:left;
 background-color:#FFF
}

Answer 1

jquery 看起来很可靠，我做了一些 html 和 css 调整。它在 Chrome 中对我有用

http://jsfiddle.net/generalhenry/D3Hm5/1/