Question

我看了一遍，没有什么能帮我解决问题。

基本上我试图折叠页面左侧的div，当我点击一个按钮时它会折叠，因此隐藏了导航栏。

我的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calc"></div>     
<svg id="main"></svg>

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

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

我在代码笔中摆弄了这段代码，但我无法让它崩溃DIV

Answer 1

课程不能以#开头，只有ID可以。这将导致类具有选择器.#navbar-clicked并且无效CSS。

您正在寻找的是#navbar.clicked（转换为：带有ID＆＃34的元素;导航栏＆＃34;具有类＆＃34;点击＆＃34;）。

请参阅此工作代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
        <div style="color: white; text-align: center; margin-bottom: 30px;">[TEXTLOGO]</div>
</div>

＆＃13;

另一个问题是，您完全隐藏了导航栏，因此无法再次显示它。您可能希望将其中一部分显示为可见，可能带有一个图标，使用户可以清楚地看到他可以再次单击以展开导航。

JQuery toggleClass不会切换我的类并折叠div宽度

1 个答案: