Jquery - toggleClass（）隱藏的DIV，但不是在DIV內的項目

Question

我有一個codepen在這裏是從我的網站即時工作細分。

http://codepen.io/anon/pen/vgPwxO

我的HTML：

<div id="navbar"> 
     <div style=" text-align: center; margin-bottom: 30px;">[ABARTHTEXTLOGO]</div> 
      <div style="width: 100%; display: table;"> 
        <div class="navbutton">TEST 1</div> 
        <div class="navbutton">TEST 2</div> 
        <div class="navbutton">TEST 3</div> 
        <div class="navbutton">TEST 4</div> 
      </div> 
    </div> 

我的CSS：

#navbar 
    { 
     position: fixed; 
     width: 15%; 
     height: 100vh; 
     background: rgb(000, 000, 000); 
     background: rgba(000, 000, 000, 0.7); 
     margin: 0px; 
     padding: 0px; 
     float: left; 
    } 
    #navbar.clicked 
    { 
     width: 0%; 
    } 

我的JQuery：

$(document).ready(function() 
{ 
    $('#navbar').click(function() 
    { 
    $('#navbar').toggleClass('clicked', 200); 
    }); 
}); 

對於這樣做的目的，你只需點擊導航欄關閉它。

您可以重新打開通過點擊文本在DIV

然而，當我關閉它，我想所有的文本項與它消失了。目前他們都只是向左移動。

我如何讓他們消失與div？

感謝，

Answer 1

添加overflow: hidden財產成.navbar元素。

http://codepen.io/anon/pen/vgPwjG

Answer 2

如果你想他們完全消失點擊後，將它添加到您的CSS：

#navbar.clicked * { 
     display: none; 
    } 

如果你想仍然看到文本的一部分，切成格，使用：

#navbar.clicked { 
     overflow: hidden; 
    }