创建具有多个子菜单的megamenu并添加幻灯片动画

时间：2017-12-26 08:50:20

标签： javascript jquery html css

我有一个带有几个子菜单的超级菜单。单击第二个子类别中的元素时，动画无法正常工作。 在我看来，这部分代码正在制作这个bug，但如果没有它，动画就无法工作，当第二次点击它时：

有办法解决吗？

＆＃13;
＆＃13; 
$('.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);
});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

您可以通过添加和删除类进行动画处理，并根据类为width，opacity，visibility设置 CSS 的动画，如下所示：

＆＃13;
＆＃13; 
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');
});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题