Question

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

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

提前感谢您的帮助。

以下是示例的链接：http://www.billjordandesign.com/jQuery_tests/horizontal_accordion.html

这是我的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/

水平手风琴在Safari或Chrome中无效

1 个答案: