jquery - 具有多个 Div 的切换/垂直滑块

Question

我有 2 个 div 部分，一个 div 包含视频，其他有表格数据。我想在水平方向上切换它们，即从右到左，反之亦然。如果 video display table div 被隐藏，如果 table 则 video div 将隐藏。

这在垂直方向上工作正常。

<div class="option_list">
  <p class="video_head">Video</p>
  <div class="divVideo"> Video frame...</div>
  <p class="table_head">table</p>
  <div class="divtable"> table frame...</div>
</div>

脚本 -

 <script type="text/javascript">
    $(document).ready(function () {
      $(".table_head").click(function () {
      $(".divtable").slideToggle();
      $(".divVideo").hide();
     });
   $(".video_head").click(function () {
    $(".divVideo").slideToggle();
    $(".divtable").hide();
   });
});
</script>

如何水平切换？

Answer 1

你可以这样写

$(document).ready(function () {
      $(".table_head").click(function () {
      $(".divtable").animate({width: 'toggle'});
      $(".divVideo").hide();
     });
   $(".video_head").click(function () {
    $(".divVideo").animate({width: 'toggle'});;
    $(".divtable").hide();
   });
});