javascript - Jquery - toggleClass() 隐藏了 DIV 而不是 DIV 中的元素

Question

我这里有一个代码笔，它是从我正在处理的网站上拆下来的。

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