본문 바로가기

Story/Jquery

메뉴 클릭시 클릭된 메뉴가 맨 위로 올라오도록 순서 바꿔주기

반응형

jquery 부분

$(document).ready(function($){
    $(".lnbbtn").live('click', function(e) {
        e.preventDefault();

        var idx = $(".lnbbtn").index($(this));

        var oldlnb = $(".lnb").eq(idx);
        var oldsub = $(".sub").eq(idx);

        $(".lnb",".submenu").eq(idx).remove();
        $(".sub",".submenu").eq(idx).remove();

        $('.submenu').prepend( oldsub )
        $('.submenu').prepend( oldlnb )
    });
});

 

html 부분

<div class="submenu">
    <div id="menu1" class="lnb">
        <a href="#" style="cursor:hand;" class="lnbbtn"><img src="../images/common/icon_up.gif" /></a>
    </div>
    <div id="submenu1" class="sub" style="display:none;">
        <p><img src="../images/products/mn1_sub1.gif" /></p>
        <div class="ssub">
            <ul >
                <a href="#"><li><img src="../images/products/mn1_sub1-01.gif" /></li></a>
                <a href="#"><li><img src="../images/products/mn1_sub1-02.gif" /></li></a>
                <a href="#"><li><img src="../images/products/mn1_sub1-03.gif" /></li></a>
                <a href="#"><li><img src="../images/products/mn1_sub1-04.gif" /></li></a>
                <a href="#"><li><img src="../images/products/mn1_sub1-05.gif" /></li></a>
                <a href="#"><li><img src="../images/products/mn1_sub1-06.gif" /></li></a>
                <a href="#"><li><img src="../images/products/mn1_sub1-07.gif" /></li></a>
                <a href="#"><li><img src="../images/products/mn1_sub1-08.gif" /></li></a>
            </ul>
        </div>
        <p><img src="../images/products/mn1_sub2.gif" /></p>
        <p><img src="../images/products/mn1_sub3.gif" /></p>
        <p><img src="../images/products/mn1_sub4.gif" /></p>
        <p><img src="../images/products/mn1_sub5.gif" /></p>
        <p><img src="../images/products/mn1_sub6.gif" /></p>
        <p><img src="../images/products/mn1_sub7.gif" /></p>
        <p><img src="../images/products/mn1_sub8.gif" /></p>
    </div>

    <div id="menu2" class="lnb">
        <a href="#" style="cursor:hand;" class="lnbbtn"><img src="../images/common/icon_up.gif" /></a>
    </div>
    <div id="submenu2" class="sub" style="display:none;"><p>의류서브메뉴</p></div>


    <div id="menu3" class="lnb">
        <a href="#" style="cursor:hand;" class="lnbbtn"><img src="../images/common/icon_up.gif" /></a>
    </div>
    <div id="submenu3" class="sub" style="display:none;"><p>여성용서브메뉴</p></div>
</div>

반응형