горизонтальная гармошка не работает в Safari или Chrome - PullRequest
Новая
       25

горизонтальная гармошка не работает в Safari или Chrome

0 голосов
/ 12 ноября 2010

Я уверен, что мне здесь не хватает чего-то очевидного, поскольку я относительно новичок в jQuery. Я пытаюсь построить горизонтальный аккордеон. Пока что он отлично работает в FF, но не в Safari или Chrome.

В Safari и Chrome div .content отображаются под соответствующими панелями аккордеона, а не сохраняют свое положение и демонстрируют анимацию ширины.

Заранее спасибо за любую помощь.

Вот ссылка на пример: 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
}

1 Ответ

0 голосов
/ 12 ноября 2010

JQuery выглядит солидно, я сделал некоторые твики HTML и CSS.Это работает для меня в Chrome 

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