잡동사니에도 사랑을

[JQuery] 선택된 항목만 내용 표시 본문

JAVA_EE/JQuery

[JQuery] 선택된 항목만 내용 표시

luvforjunk 2021. 10. 18. 12:13
728x90
반응형

[21.10.18] exam04(06_jQueryDOM) - 선택된 항목만 내용 표시

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
	background: #252422;
}

ul {
	padding: 0;
	margin: 50px auto;
	list-style: none;
	width: 800px;
}

.title {
	padding: 0;
	margin: 0;
}

.title>a {
	display: block;
	padding-top: 12px;
	font-size: 14px;
	text-indent: 12px;
	text-decoration: none;
	font-weight: bold;
	color: white;
	height: 23px;
	background: url('../img/background.jpg');
}

.selected {
	background: url('../img/background-selected.jpg') !important;
}

.content {
	margin: 0;
	background: #D4D0C8;
	padding: 10px;
	height: 200px;
	overflow-y: auto;
}
</style>
</head>
<body>
	<ul>
		<li class="collapsible">
			<h2 class="title">
				<a href="../txt/html5.txt">HTML5</a>
			</h2>
			<p class="content"></p>
		</li>
		<li class="collapsible">
			<h2 class="title">
				<a href="../txt/jquery.txt">jQuery</a>
			</h2>
			<p class="content"></p>
		</li>
		<li class="collapsible">
			<h2 class="title">
				<a href="../txt/bootstrap.txt">Bootstrap3</a>
			</h2>
			<p class="content"></p>
		</li>
	</ul>

	<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script type="text/javascript">
$(function() {
	// 첫 번째 항목이 펼쳐져 있도록 처리한다.
	// 탭의 내용은 첫 번째 항목 안의 <a>태그가 가리키는 txt파일을 읽어와서 출력시킨다.
	$('.collapsible:eq(0) > .content').load(
			$('.collapsible:eq(0) .title a').attr('href'));

	// 첫 번째 항목의 <a>에게 selected 클래스를 적용한다.
	$('.collapsible:eq(0) a').addClass('selected');

	// 첫 번째 항목 이외의 나머지 항목들 안에 있는 content를 숨긴다.
	// $().not().find().hide();
	$('.collapsible').not(':eq(0)').find('.content').hide();

	$('.collapsible .title a').click(function() {
		$(this).toggleClass('selected');

		// 클릭된 것을 제외한 나머지 링크들은 selected 클래스를 무조건 삭제한다
		$('.collapsible .title a').not(this).removeClass('selected');

		// 펼칠 대상 검색
		var target = $(this).parents('.collapsible').find('.content');
		// var target = $(this).parent().next();
		
		// 나머지 대상 검색
		var other = $('.collapsible .title a').not(this).parents('.collapsible').find('.content');
		// var other = $('.content').not(target);
		
		target.slideToggle(300);
		other.slideUp(300);
		
		if(target.css("display") != "none") {
			target.load($(this).attr("href"));
		}

		return false;
	});
});
</script>
</body>
</html>

 

 

[결과]

 

728x90
반응형

'JAVA_EE > JQuery' 카테고리의 다른 글

[JQuery] 아이디, 비밀번호 유효성 검사 & 일정 시간 후 서버로 정보 보내기  (0) 2021.10.18
[JQuery] jQueryDOM - 카테고리(목록) 추가 및 삭제  (0) 2021.10.18
[JQuery] 마우스 올려 서브 메뉴 펼치기 & 모든 서브 메뉴 숨기기  (0) 2021.10.18
[21.10.18] exam02(06_jQueryDOM) - 이미지 목록 클릭 시 클릭한 이미지 띄우기  (0) 2021.10.18
[21.10.18] exam01(06_jQueryDOM) - 문서 객체 모델(DOM, Document Object Model) 예제문  (0) 2021.10.18
'JAVA_EE/JQuery' Related Articles more