Javascript 单击不工作JQuery时初始化

我在一个边栏上工作，如果我点击一个系统按钮，边栏一定会变小。所以我的计划是将类添加到不同的div中，以调整样式，使其变得更小等等

不幸的是，我的代码不起作用。我用一个带有display none的简单类进行了尝试，但是如果我单击该类，它将不会应用css。这是我的密码：

<aside>
    <h2 class="menu-head-text">Menu options</h2>
    <a href="#" class="menu-size">
        <i class="fa fa-bars"></i>
    </a>
    <ul>
        <li><a href="nieuwewall.html"><i class="fa fa-folder-open"></i><span class="menu-item-text">Overzicht wall</span></a></li>
        <li><a href="nieuwewall.html"><i class="fa fa-credit-card"></i><span class="menu-item-text">Betaalgegevens</span></a></li>
    </ul>
</aside>

。显示{
显示：无！重要；
}

---

希望有人能帮我。提前谢谢

试试这个。移除

显示屏中的

$(function() { //run when the DOM is ready
    $(".menu-size").click(function() { //use a class, since your ID gets mangled
        $(".menu-item-text").addClass("display"); //add the class to the clicked element
    });
});

上面的答案是正确的，但最好将一个css类添加到主元素中（除了示例之外），然后通过css类嵌套将css添加到子元素中

查看这个JSFIDLE：
HTML:

jQuery：

$(function() {
    $(".menu-size").click(function() {
        $("aside").addClass("smaller");
    });
});

addClass（“display”）
，您已经加了前缀
，只需传递类名，无需在addClass和removeClass上添加
<代码>$（“选择器”）.addClass（“显示”）

aside {
  background-color: red; 
}

aside.smaller {
  background-color: blue; 
}

aside.smaller * {
  font-size: .8rem;
}

$(function() {
    $(".menu-size").click(function() {
        $("aside").addClass("smaller");
    });
});