js 질문입니다.

js 질문입니다.

QA

js 질문입니다.

답변 1

본문

현재소스입니다. 실행했을때 3552797822_1573431020.5905.png

네모칸에서 마우스커서를 떼면 슬라이드업되게 하려고 한다면 현재소스에 어떻게 추가해야될까영?

일주일동안 고민중인 초보입니다ㅠ 고수님들께서 가르켜주시면 감사하겠습니다. :)


<!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();
});

 

추가 해보시길 바랍니다.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 24
© SIRSOFT
현재 페이지 제일 처음으로