씨네
공부하는 개발자 강씨네
씨네
  • 분류 전체보기 (460)
    • Web (21)
      • HTML (11)
      • CSS (10)
    • JS 관련 (49)
      • JavaScript (27)
      • JQuery (22)
    • TS 관련 (15)
      • TypeScript (15)
    • NodeJS (7)
      • NodeJS (7)
    • 따라하며 배우는 시리즈 (23)
      • NodeJS & ReactJS Basic (23)
      • NodeJS & ReactJS Movie (0)
      • NodeJS & ReactJS Youtube (0)
      • NodeJS & ReactJS ChatBot (0)
    • SPA (14)
      • React (14)
      • Vue (0)
      • Anguler (0)
    • Java 관련 (118)
      • Java (52)
      • JDBC (6)
      • JSP & Servlet (18)
      • Spring Legecy (38)
      • SpringBoot (4)
    • Python (26)
      • Python (20)
      • PyMongo (1)
      • Django (5)
    • Git (24)
      • Github (24)
    • RDB (22)
      • Oracle (21)
      • MySQL (1)
    • NoSQL (5)
      • MongoDB (5)
    • OS (4)
      • Linux (4)
    • 빅데이터 (2)
      • hadoop (2)
    • IDE (20)
      • eclipse (11)
      • VSCODE (4)
      • VisualStudio (1)
      • IntelliJ (1)
      • PyCharm (1)
      • DBeaver (2)
    • Install (3)
      • Tomcat (1)
      • Docker (1)
      • Anaconda (1)
    • 오류&에러 (28)
      • TS (2)
      • NodeJS (7)
      • SQL (8)
      • Java (1)
      • Spring (4)
      • Git (6)
      • 기타 (0)
    • 알고리즘 (67)
      • 수열 (1)
      • 백준(backjoon) (39)
      • Programmers (27)
    • 자격증 (5)
      • SQLD (5)
    • 기타 (2)
    • IT유튜브로 지식쌓기 (2)

공지사항

인기 글

최근 글

티스토리

250x250
hELLO · Designed By 정상우.
씨네

공부하는 개발자 강씨네

[jQuery] 메뉴 숨기기 보이기( 이펙트 메서드 활용 )
JS 관련/JQuery

[jQuery] 메뉴 숨기기 보이기( 이펙트 메서드 활용 )

2022. 2. 20. 10:54
728x90

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.main_menu{width: 300px;}
.sub_menu1{cursor: pointer;}
.sub_menu2{display: none; cursor: default;}
</style>
<script type="text/javascript" src="resources/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">

	$(function(){
		$("b").click(function(){
			// $(this).next().slideToggle();
			// $(this).parent().siblings().find("ul").slideUp();
			$(this).next().slideToggle().parent().siblings().find("ul").slideUp();
		});
	});

</script>
</head>
<body>

	<p>메뉴 만들기</p>
	
	<ul type="square" class="main-menu">
		<li class="sub_menu1"><b>css선택자</b>
			<ul type="circle" class="sun_menu2">
				<li>tag로 선택</li>
				<li>id로 선택</li>
				<li>class로 선택</li>
				<li>parent로 선택</li>
				<li>parent &gt; child로 선택</li>
				<li>:nth-child(n/odd/even)</li>
				<li>:first-child</li>
				<li>:last-child</li>
			</ul>
		</li>
		<li class="sub_menu1"><b>속성선택자</b>
			<ul type="circle" class="sun_menu2">
				<li>[attr]</li>
				<li>[attr=value]</li>
				<li>[attr!=value]</li>
			</ul>
		</li>
		<li class="sub_menu1"><b>폼선택자</b>
			<ul type="circle" class="sun_menu2">
				<li>input:type</li>
			</ul>
		</li>
		<li class="sub_menu1"><b>사용자정의선택자</b>
			<ul type="circle" class="sun_menu2">
				<li>:eq(n)</li>
				<li>:first</li>
				<li>:last</li>
				<li>:even</li>
				<li>:odd</li>
				<li>:parent</li>
			</ul>
		</li>
	</ul>

</body>
</html>

​

​

​

$(function(){
	$("b").click(function(){
		$(this).next().slideToggle().parent().siblings().find("ul").slideUp();
	});
});

이 간단해 보이는 함수 하나로 인해서 <b>태그로 감싸져 있는 텍스트를 클릭하면 이벤트가 발생을 합니다!

한줄인데 되게 어렵죠?

this 누른거 자신의, next()다음것을, slideToggle()할것이다 ( 숨겨져있으면 보여주고 보여져있으면 숨길건데 slide방식으로 할것이다 ), 또 그다음 부모의, 형제 중에서( 지금까지 부모 태그 자식 태그라고 해왔던것 처럼 형제태그를 뜻합니다 ), ul태그를 찾아서, sildeup 시킨다.

​

무슨 외국어 해석하는거같죠?

프로그래밍언어도 언어니까요!

​

쉽게 말해서 클릭한거를 메뉴바가 내려오면서 보이고 다른것들은 올라가면서 숨겨진다는 뜻입니다.

 
 
728x90

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

[jQuery] replaceWith(), replaceAll()  (0) 2022.02.22
[jQuery] toggleClass(), hasClass(), removeClass(), addClass()  (0) 2022.02.21
[jQuery] 이펙트 메서드( animate() )  (0) 2022.02.19
jQuery] 이펙트 메서드( slide, fade, animate )  (0) 2022.02.18
[jQuery] 이벤트 전파( stopPropagation(), preventDefault(), return false )  (0) 2022.02.17
    'JS 관련/JQuery' 카테고리의 다른 글
    • [jQuery] replaceWith(), replaceAll()
    • [jQuery] toggleClass(), hasClass(), removeClass(), addClass()
    • [jQuery] 이펙트 메서드( animate() )
    • jQuery] 이펙트 메서드( slide, fade, animate )
    씨네
    씨네
    개발자 씨네가 공부하는 내용을 기록 겸 공유하는 블로그입니다!

    티스토리툴바