front/JS
[JQuery] 특정 부분을 제외한 부분을 클릭했을 때, 작동
배고파요
2023. 2. 7. 16:05
728x90
+) 2023.06.01
추가 :: https://madinthe90.tistory.com/18
지난 번에 작성하다 만 것.
https://gloria94682015.tistory.com/92
[JQuery] 제이쿼리로 hover 기능
📍 ? ㅇㅇ 출처 : https://chobokkiri.tistory.com/67 개발 공부를 위한 블로그 입니다. 오류가 있다면 댓글로 알려주세요! 감사합니다.
gloria94682015.tistory.com
이어서 다시 작성.!!
📍 이걸 한 이유 ?
- 원래는 좌측 메뉴바 있고, hover 하면 옆으로 메뉴바가 나오는. 그런 형태임.
- 근데, 새로 변경되는 것이기 때문에, 사람들이 모를 거 같다고 함...;; (모를리 없을 것 같기는 한데..)
- 음? 이라는 생각은 했지만, 만들어 달라고 하니까 만들어야했음.
- ---
- ---
- 처음에 로드 될 때는, 메뉴바가 펼쳐진 상태이고, 조작 및 좌측 메뉴바에 hover 되면 원래의 상태로 돌아가게 해야 했음.
<!-- 자동으로 가장 최신의 jQuery 스크립트를 가져옴. -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
console.log("document ready");
$("#leftMenuArea").on("click", function(e) {
console.log("click _ leftMenuArea");
if(!$(e.target).hasClass("left_menu_area")) {
$(".left_menu_area").css({"display":"inline-block", "width":"150px;"});
console.log("test");
}
});
$('#bodyArea').click(function(e) {
$("#leftMenuArea").attr("style", "display:inline-block; width:100px;");
$("#leftMenuArea").find("div").attr("style", "display:inline-block; width:100px;");
$("#leftMenuArea").find("div.controll_area").attr("style", "width:100px;");
});
$("#leftMenuArea").hover(
function(){
console.log("#leftMenuArea _ hover _ succ");
$("#leftMenuArea").attr("style", "display:inline-block; width:150px;");
$("#leftMenuArea").find("div").attr("style", "display:inline-block; width:150px;");
$("#leftMenuArea").find("div.controll_area").attr("style", "width:150px;");
},
function(){
console.log("#leftMenuArea _ hover _ fail");
$("#leftMenuArea").attr("style", "display:inline-block; width:100px;");
$("#leftMenuArea").find("div").attr("style", "display:inline-block; width:58px;");
$("#leftMenuArea").find("div.controll_area").attr("style", "width:58px;");
}
);
});
</script>
<style>
#leftMenuArea{height:100%; width: 200px; background-color: rgb(245, 164, 164); border: 1px solid red; position: fixed;}
#bodyArea{height:100%; width: calc(100% - 110px); background-color: rgb(147, 147, 247); border: 3px solid blue; display: inline-block; float:right; }
.left_menu_area{display: inline-block;}
.left_menu_area .controll_area{
width: 100px;
/* 애니메이션 효과 관련 */
transition: all .25s cubic-bezier(.25, .46, .45, .94);
-webkit-transition: all .25s cubic-bezier(.25, .46, .45, .94);
-moz-transition: all .25s cubic-bezier(.25, .46, .45, .94);
-ms-transition: all .25s cubic-bezier(.25, .46, .45, .94);
-o-transition: all .25s cubic-bezier(.25, .46, .45, .94);
/*
-webkit-transition: all all .25s cubic-bezier(.25, .46, .45, .94) ease-out;
-moz-transition: all all .25s cubic-bezier(.25, .46, .45, .94) ease-out;
-o-transition: all all .25s cubic-bezier(.25, .46, .45, .94) ease-out;
transition: all all .25s cubic-bezier(.25, .46, .45, .94) ease-out;
*/
}
#leftMenuArea:hover{
width: 200px;
transition: all .25s cubic-bezier(.25, .46, .45, .94);
-webkit-transition: all .25s cubic-bezier(.25, .46, .45, .94);
-moz-transition: all .25s cubic-bezier(.25, .46, .45, .94);
-ms-transition: all .25s cubic-bezier(.25, .46, .45, .94);
-o-transition: all .25s cubic-bezier(.25, .46, .45, .94);
}
</style>
<html>
<head></head>
<body class="body">
<div id="leftMenuArea" >
leftMenuArea
<br>
<div class="controll_area">controll_area</div>
</div>
<div id="bodyArea">
bodyArea
<br>
가나다라마바사아자차카타파하_ABCDEFGHIJKLMNOPQRXTUVWXYZ
</div>
</body>
</html>
출처 :
https://chobokkiri.tistory.com/67
[JQuery][TIP] 특정 영역을 제외한 부분을 클릭했을 때
특정 영역을 제외한 부분을 클릭했을 때 이벤트를 발생시켜야 할 때가 있다. 그때는 다음과 같이 하면 된다. $('html').click(function(e) { if(!$(e.target).hasClass("area")) { alert('영역 밖입니다.'); } }); 즉 특
chobokkiri.tistory.com
개발 공부를 위한 블로그 입니다.
오류가 있다면 댓글로 알려주세요!
감사합니다.
728x90