Jquery slideToggle to right

Question

我有这个非常简单的代码：

$(document).ready(function() {      

   $('.content>div').hide();      

   $('.content>h3').click(function() {      
      $(this).next().slideToggle('fast');      
      $(this).toggleClass('active');      
   });  

});     

它当然导致我的div从上到下滑出。你能帮我添加这段代码或者命令结果它会从右向左滑出吗？

Answer 1

.slideToggle()可以激活匹配元素的高度，因此您可能不得不依赖于不同的函数/方法 - 但这并不困难。您可以在JavaScript中执行此操作或使用CSS3动画属性。取决于用例，但我可能会使用CSS3选项，因为它在大多数设备上都是硬件加速的，所以它更流畅。

这是一个简单的草图，如何做到这一点

在JavaScript文件中：

$('.content>h3').click(function() {   
  // just switch the class 'open' the rest is defined in CSS   
  $(this).next().toggleClass('open');       
  $(this).toggleClass('active');      

}）;

在CSS文件中：

.content div {
    width: 0;
    overflow: hidden;
    transition: width 1s ease-out;
}
.content div.open {
    width: 100%;
}

例：
http://jsbin.com/qebigohu/2/（预览）
http://jsbin.com/qebigohu/2/edit（代码）