[jQuery] DOM탐색 메서드

728x90

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
	.menu{width: 150px; background-color: skyblue; position: absolute;}
	#menu2{left: 170px;}
	#menu3{left: 330px;}
	a{text-decoration: none;}
</style>
<script type="text/javascript" src="resources/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">

	$(function(){
		$(".menu div").css("display", "none");
		
		$(".menu").hover(
			function(){
				$(this).children("div").toggle();
			}
		);
	});

</script>
</head>
<body>

	<b>DOM 탐색 메서드</b><br>
	
	<div id="menu1" class="menu">
		<a href="jq06_dom01.html">필터링 메서드</a>
		<div>.eq()</div>
		<div>.slice()</div>
		<div>.first()</div>
		<div>.last()</div>
	</div>
	
	<div id="menu2" class="menu">
		<a href="jq07_dom02.html">트리 탐색 메서드</a>
		<div>.find()</div>
		<div>.children()</div>
		<div>.parent()</div>
		<div>.next()</div>
	</div>
	
	<div id="menu3" class="menu">
		<a href="jq08_dom03.html">기타 탐색 메서드</a>
		<div>.add()</div>
		<div>.is()</div>
	</div>

</body>
</html>

해당 코드는 menu class를 가진 태그들의 자식 div영역은 모두 display: none; 처리 되어있습니다.

하지만 마우스를 올리면 hover 효과로 숨겨진 태그들을 보여주고 다시 마우스를 떼면 숨김처리됩니다.

$(function(){
	$(".menu div").css("display", "none");
		
	$(".menu").hover(
		function(){
			$(this).children("div").toggle();
		}
	);
});

함수에서 보면 menu안에 있는 div의 display를 none하여 보이지 않게 합니다.

하지만 마우스가 올라간 div영역은 toggle효과로 인해 보여지게 되고 다시 마우스가 내려가면 숨겨집니다!

728x90

'JS 관련 > JQuery' 카테고리의 다른 글

jQuery] 이펙트 메서드( slide, fade, animate ) (0)	2022.02.18
[jQuery] 이벤트 전파( stopPropagation(), preventDefault(), return false ) (0)	2022.02.17
[jQuery] add(), is() (0)	2022.02.15
[jQuery] find(), children(), parent(), next() (0)	2022.02.14
[jQuery] checkbox( 전체선택 ) (1)	2022.02.12

'JS 관련 > JQuery' 카테고리의 다른 글

티스토리툴바