Question

我在侧边栏上工作如果点击系统按钮，那么必须小一些。所以我的计划是将类添加到不同的div中以调整样式，使其变小等等。

不幸的是我的代码无效。我已经尝试了一个简单的类，显示无，但如果我点击类，它将不会应用CSS。这是我的代码：

SELECT * FROM `table` WHERE id='0';

<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() {
    $(".menu-size").click(function() {
        $(".menu-item-text").addClass(".display");
    });
});

希望有人可以帮助我。提前致谢

Answer 1

试试这个。移除.

中的display

$(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
    });
});

Answer 2

以上答案是正确的，但最好将一个css类添加到main元素（除了你的例子），然后通过css类嵌套使css给children元素。

看看这个jsfiddle： HTML：

<aside>
  <h2 class="menu-head-text">Menu options</h2>
  <a href="#" class="menu-size"><i class="fa fa-bars">XXX</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>

CSS：

aside {
  background-color: red; 
}

aside.smaller {
  background-color: blue; 
}

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

jQuery的：

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

https://jsfiddle.net/LLu4tra9/

关于点击不工作JQuery的类

2 个答案: