javascript - 创建一个带有多个子菜单的 megamenu 并添加幻灯片动画

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

您可以通过添加和删除类来制作动画，并根据类通过 CSS< 为 width、opacity、visibility 设置动画 如下所示:

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>