Klasse auf Klick funktioniert nicht JQuery

Question

Ich arbeite an einer Sidebar, was kleiner sein muss, wenn ich auf eine Systemschaltfläche klicke. So mein Plan ist, Klassen verschiedenen div hinzuzufügen, um den Stil zu justieren, damit es kleiner etc. wird.

Leider funktioniert mein Code nicht. Ich habe es mit einer einfachen Klasse mit display none versucht, aber wenn ich auf die Klasse klicke, wird das CSS nicht angewendet. Hier ist mein Code:

<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"); 
    }); 
}); 

.display { 
    display: none !important; 
} 

Hoffnung jemand kann mir helfen. Vielen Dank im Voraus

Answer 1

Versuchen Sie diese. Entfernen Sie die . in den 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

Above Antworten ist richtig, aber es ist besser, zu einer CSS-Klasse Hauptelement hinzufügen (abgesehen auf Ihrem excample), dann CSS machen, um Kinder Element von CSS-Klassen Verschachtelung.

Schauen Sie sich diese 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/