Question

我在这里有一个codepen，它是从我的网站上分解出来的。

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

如果您仍想看到部分文字，请切入div，使用：

#navbar.clicked {
       overflow: hidden;
    }

Jquery - toggleClass（）隐藏了DIV，但没有隐藏DIV中的项目

2 个答案: