複数のサブメニューを持つメガメニューを作成し、スライドアニメーションを追加する

Question

メガメニューにはいくつかのサブメニューがあります。 2番目のサブカテゴリの要素をクリックすると、アニメーションが正しく機能しません。私の意見では 、このコードの一部は、このバグを作っているが、それなしにアニメーションが二度目でそれをクリックすると、機能していません。

は解決するが方法ですか？

$('.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

あなたは以下のようなvisibilityによってCSSwidth、opacity、アニメーションクラスを追加し、除去することにより、アニメーション化し、クラスに基づくことができます。

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>

を