javascript - 单击 div 后在 Javascript 中移动表格

Question

好的，问题来了。我试图在按下某个选项卡后显示表格。这是我的 HTML 代码:

    <div class="bar1" id="bar1">    
    <div class="tables">
      <table id="statistics" class="table table-condensed table-striped"></table>
      <table id="DataAnalysis" class="table table-condensed table-striped"></table>
      <table id="Inventory" class="table table-condensed table-striped"></table>
      <table id="Purchase" class="table table-condensed table-striped"></table>
    </div>

这是我的 CSS:

.tables {
    position: relative;
    left: -5000px;
    top: -5000px;
}

最后这是我的 JavaScript 代码:

$('#bar1').click(function() {
    $('#statistics').slideUp();

    $('#Inventory').animate({
      left: "500px"

    }, 200);


    $('#DataAnalysis').slideUp();

    $('#Purchase').slideUp();


  });

由于某种原因，我的代码无法运行。我看不到我的代码的问题。

Answer 1

html:

<div class="bar1" id="bar1">click</div>
    <div class="tables">
      <table id="statistics" class="table table-condensed table-striped"></table>
      <table id="DataAnalysis" class="table table-condensed table-striped"></table>
      <table id="Inventory" class="table table-condensed table-striped"></table>
      <table id="Purchase" class="table table-condensed table-striped"></table>
</div>

jquery:

$('#bar1').click(function() {
    $('.tables').toggle()
  });

CSS:

.tables {
    display:none;
}

https://jsfiddle.net/2j0tb0vy/