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/

Answer 2

像Soronbe说的，或者如果你不能将.tables div设置为display：none，就像这样：

$(function() {
    $('#bar1').click(function() {

    $('.tables').toggleClass('showtables');
    $('#statistics').slideUp();

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

    }, 200);


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

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



    })
      });

http://jsfiddle.net/w56t39pg/2/

单击div后在Javascript中移动表

2 个答案: