js 질문입니다.
본문
현재소스입니다. 실행했을때 
네모칸에서 마우스커서를 떼면 슬라이드업되게 하려고 한다면 현재소스에 어떻게 추가해야될까영?
일주일동안 고민중인 초보입니다ㅠ 고수님들께서 가르켜주시면 감사하겠습니다. :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<style>
ul, li {list-style:none;padding:0;margin:0;}
ul.list {display:flex;}
ul.list li {width:40px;height:40px;margin:0 10px;border:1px solid black;}
.cont {display:none;}
</style>
<body>
<div>
<ul class="list" data-row="1">
<li>AA</li>
<li>BB</li>
<li>CC</li>
<li>DD</li>
</ul>
<div>
<div class="cont cont1_1">aaaaaaa</div>
<div class="cont cont1_2">bbbbbbb</div>
<div class="cont cont1_3">ccccccc</div>
<div class="cont cont1_4">dddddd</div>
</div>
</div>
<div>
<ul class="list" data-row="2">
<li>AA</li>
<li>BB</li>
<li>CC</li>
<li>DD</li>
</ul>
<div>
<div class="cont cont2_1">aaaaaaa</div>
<div class="cont cont2_2">bbbbbbb</div>
<div class="cont cont2_3">ccccccc</div>
<div class="cont cont2_4">dddddd</div>
</div>
</div>
</body>
<script>
$('.list li').hover(function() {
var thisIdx = $(this).index() + 1;
var thisRow = $(this).parents('.list').data('row');
$('.cont').hide();
$('.cont' + thisRow + '_' + thisIdx).slideDown();
}, function() {
//do nothing
});
</script>
</html>
답변 1
$('.list li').mouseleave(function() {
var thisIdx = $(this).index() + 1;
var thisRow = $(this).parents('.list').data('row');
$('.cont' + thisRow + '_' + thisIdx).slideUp();
});
추가 해보시길 바랍니다.
답변을 작성하시기 전에 로그인 해주세요.
