선택한 div에서만 클래스 숨기기를 토글하려면 버튼 클릭 시 이벤트를 설정해야 합니다. + 기호를 클릭할 때 특정 div를 숨겨야 한다고 가정해 보겠습니다.
글꼴 + 또는 - 아이콘을 얻으려면 font-awesome −
를 연결해야 합니다.<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/ 4.7.0/css/font-awesome.min.css">
다음은 + 기호 -
를 클릭할 때 클래스 숨기기를 토글하는 코드입니다.예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/fontawesome.
min.css">
<style>
.hideDiv {
display: none;
}
</style>
</head>
<body>
<div class="firstDetails">
<h2 class="customer-track">Customer 1<i class="fa fa-plus"></i></h2>
<div>
<p class="customer">John</p>
<p class="customer">US</p>
</div>
<div class="secondDetails">
<h2 class="customer-track">Customer 2 <i class="fa fa-plus"></i></h2>
<div>
<p class="customer">David</p>
<p class="customer">AUS</p>
</div>
</div>
</div>
<script>
$(".fa-plus").on("click", function(){
$(this).parent().siblings('.secondDetails').toggleClass("hideDiv");
});
</script>
</body>
</html> 위의 프로그램을 실행하기 위해서는 "anyName.html(index.html)"이라는 파일명을 저장하고 파일을 우클릭하면 됩니다. VS Code 편집기에서 "Open with Live Server" 옵션을 선택합니다.
출력
이것은 다음과 같은 출력을 생성합니다 -
"Customer1" 옆에 있는 더하기 아이콘을 클릭하면 다음과 같은 출력이 표시됩니다. 즉, Customer2div가 사라집니다 -
