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