여러 하위 메뉴가있는 메가 메뉴 만들기 및 슬라이드 애니메이션 추가

Question

메가 메뉴에 여러 하위 메뉴가 있습니다. 두 번째 하위 범주의 요소를 클릭하면 애니메이션이 제대로 작동하지 않습니다. 내 의견으로는,이 코드 부분은이 버그를 만들고 있지만, 애니메이션이 작동하지 않는 경우 두 번째 클릭을 클릭하십시오.

해결 방법이 있습니까?

$('.category li').click(function(event) { 
 
    $('.category li').children('.r_div').css('display', 'none'); 
 
    $(this).children('.r_div').css('display', 'block'); 
 
    $('.category li').children('.r_div').animate({ 
 
    width: '0%'  
 
    },0); 
 
    $(this).children('.r_div').animate({ 
 
    width: '100%'  
 
    },300); 
 
}); 
 
$('.cat_2 li').click(function(event) { 
 
    $('.cat_2 li').children('.cat_3').css('display', 'none'); 
 
    $(this).children('.cat_3').css('display', 'block'); 
 
    
 
    $(this).children('.cat_3').animate({ 
 
    width: '100%'  
 
    },300); 
 
});

ul { 
 
    list-style: none; 
 
    width: 20%; 
 
    position: relative; 
 
    padding:0; 
 
} 
 

 
.category li { 
 
    padding: 5px 0; 
 
    background: #eee; 
 
    cursor:pointer; 
 
    border-bottom: 1px solid #fff; 
 
} 
 
.category ul{ 
 
    width:100%; 
 
} 
 

 
.r_div , .cat_3{ 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    width:0%; 
 
    background: #eee; 
 
    left:100%; 
 
    border-left:3px solid #000; 
 
    padding:0 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="category"> 
 
    <li> 
 
    Menu #1 
 
    <div class="r_div"> 
 
     <ul class="cat_2"> 
 
     <li>Test 
 
      <ul class="cat_3"> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      </ul> 
 
     </li> 
 
     <li>Test 
 
      <ul class="cat_3"> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      </ul> 
 
     </li> 
 
     <li>Test 
 
      <ul class="cat_3"> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      </ul> 
 
     </li> 
 
     <li>Test 
 
      <ul class="cat_3"> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      </ul> 
 
     </li> 
 
     <li>Test 
 
      <ul class="cat_3"> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 

 
    </div> 
 
    </li> 
 
    <li> 
 
    Menu #2 
 
    <div class="r_div"> 
 
     <ul> 
 
     <li>Test2</li> 
 
     <li>Test2</li> 
 
     <li>Test2</li> 
 
     <li>Test2</li> 
 
     <li>Test2</li> 
 
     </ul> 
 

 
    </div> 
 
    </li> 
 
    <li> 
 
    Menu #3 
 
    <div class="r_div"> 
 
     <ul> 
 
     <li>Test3</li> 
 
     <li>Test3</li> 
 
     <li>Test3</li> 
 
     <li>Test3</li> 
 
     <li>Test3</li> 
 
     </ul> 
 

 
    </div> 
 
    </li> 
 
    <li> 
 
    Menu #4 
 
    <div class="r_div"> 
 
     <ul> 
 
     <li>Test4</li> 
 
     <li>Test4</li> 
 
     <li>Test4</li> 
 
     <li>Test4</li> 
 
     <li>Test4</li> 
 
     </ul> 
 

 
    </div> 
 
    </li> 
 
    <li> 
 
    Menu #5 
 
    <div class="r_div"> 
 
     <ul class="cat_2"> 
 
     <li>Test5 
 
      <ul class="cat_3"> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      </ul> 
 
     </li> 
 
     <li>Test5</li> 
 
     
 
     <li>Test5</li> 
 
     <li>Test5</li> 
 
     <li>Test5</li> 
 
     </ul> 
 

 
    </div> 
 
    </li> 
 
</ul>

Answer 1

당신은 추가하고 클래스를 제거하여 애니메이션을 적용 할 수 있습니다 및 클래스에 따라 당신이 width, opacity, visibilityCSS에 의해 아래와 같이 애니메이션 :

console.log($('.category>li').length); 
 
$('.category>li').click(function(event) { 
 
    $(this).siblings('li').find('.r_div').removeClass('slideRight').find('.cat_3').removeClass('slideRight'); 
 
    $(this).find('.r_div').addClass('slideRight'); 
 
}); 
 
$('.cat_2>li').click(function(event) { 
 
    $(this).siblings('li').find('.cat_3').removeClass('slideRight') 
 
    $(this).find('.cat_3').addClass('slideRight'); 
 
});

ul { 
 
    list-style: none; 
 
    position: relative; 
 
    padding: 0; 
 
} 
 

 
ul.category { 
 
    width: 100px; 
 
} 
 

 
.category li { 
 
    padding: 5px 0; 
 
    background: #eee; 
 
    cursor: pointer; 
 
    border-bottom: 1px solid #fff; 
 
} 
 

 
.r_div, 
 
.cat_3 { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 0%; 
 
    background: #eee; 
 
    left: 100%; 
 
    border-left: 3px solid #000; 
 
    padding: 0 10px; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
} 
 

 
.r_div.slideRight, 
 
.cat_3.slideRight { 
 
    visibility: visible; 
 
    width: 100px; 
 
    transition: all .3s linear; 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="category"> 
 
    <li> 
 
    Menu #1 
 
    <div class="r_div"> 
 
     <ul class="cat_2"> 
 
     <li>Test 
 
      <ul class="cat_3"> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      </ul> 
 
     </li> 
 
     <li>Test 
 
      <ul class="cat_3"> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      </ul> 
 
     </li> 
 
     <li>Test 
 
      <ul class="cat_3"> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      </ul> 
 
     </li> 
 
     <li>Test 
 
      <ul class="cat_3"> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      </ul> 
 
     </li> 
 
     <li>Test 
 
      <ul class="cat_3"> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 

 
    </div> 
 
    </li> 
 
    <li> 
 
    Menu #2 
 
    <div class="r_div"> 
 
     <ul> 
 
     <li>Test2</li> 
 
     <li>Test2</li> 
 
     <li>Test2</li> 
 
     <li>Test2</li> 
 
     <li>Test2</li> 
 
     </ul> 
 

 
    </div> 
 
    </li> 
 
    <li> 
 
    Menu #3 
 
    <div class="r_div"> 
 
     <ul> 
 
     <li>Test3</li> 
 
     <li>Test3</li> 
 
     <li>Test3</li> 
 
     <li>Test3</li> 
 
     <li>Test3</li> 
 
     </ul> 
 

 
    </div> 
 
    </li> 
 
    <li> 
 
    Menu #4 
 
    <div class="r_div"> 
 
     <ul> 
 
     <li>Test4</li> 
 
     <li>Test4</li> 
 
     <li>Test4</li> 
 
     <li>Test4</li> 
 
     <li>Test4</li> 
 
     </ul> 
 

 
    </div> 
 
    </li> 
 
    <li> 
 
    Menu #5 
 
    <div class="r_div"> 
 
     <ul class="cat_2"> 
 
     <li>Test5 
 
      <ul class="cat_3"> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      <li>submenu</li> 
 
      </ul> 
 
     </li> 
 
     <li>Test5</li> 
 

 
     <li>Test5</li> 
 
     <li>Test5</li> 
 
     <li>Test5</li> 
 
     </ul> 
 

 
    </div> 
 
    </li> 
 
</ul>