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; 
    }