點擊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/

Answer 2

像Soronbe說，或者，如果你不能有.tables DIV設置發出AY：沒有，像這樣：

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

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

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

    }, 200); 


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

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



    }) 
     }); 

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