클릭 클래스가 작동하지 않습니다. JQuery

Question

사이드 바에서 작업하고 있습니다. 시스템 버튼을 클릭하면 더 작아야합니다. 그래서 내 계획은 다른 div에 클래스를 추가하여 스타일이 작아 지도록 스타일을 조정하는 것입니다.

불행히도 제 코드가 작동하지 않습니다. 디스플레이 없음으로 간단한 클래스로 시도했지만 클래스를 클릭하면 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() { 
    $(".menu-size").click(function() { 
     $(".menu-item-text").addClass(".display"); 
    }); 
}); 

.display { 
    display: none !important; 
} 

희망 누군가가 나를 도울 수 있습니다 : 여기 내 코드입니다. 미리 감사드립니다.

Answer 1

시도해보십시오. 다음 중첩 CSS 클래스에 의해 어린이 요소에 CSS를 만드는 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

위 답변에 .를 제거 정확하지만 그것보다 (당신의 excample에 따로)의 주요 요소에 하나 개의 CSS 클래스를 추가 할 수 있습니다.

체크 아웃이 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/