Question

我有不同列表项的列表，因此当我从列表中单击特定项时，应使用jQuery animate将其从当前位置移至最高位置，同时使用jquery隐藏其余列表项。

$(document).ready(function() {
  $(".menu").click(function() {
    $("li").animate({
      top: '2px'
    }, 'slow');
  });
});

ul>li {
  list-style-type: none;
  line-height: 34px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
  <li>Account</li>
  <li>Profile</li>
  <li>History</li>
</ul>

Answer 1

您可以通过将 addClass 和CSS添加到已添加的类中来显示click元素，同时您可以通过jquery hide()隐藏其他li。希望能帮助到你。我只是在添加动画。

 $(document).ready(function() {
  $("li").click(function() {
        $(this).addClass('top');
        $('li').hide();
    });
});

ul>li {
  list-style-type: none;
  line-height: 34px;
}
.top{
  display:inline-block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
  <li>Account</li>
  <li>Profile</li>
  <li>History</li>
</ul>

Answer 2

为了使顶部具有动画效果，该元素必须能够采用css属性top。到目前为止，我已经使该元素具有足够的能力来接受属性top，并且在使用transition减少不透明度的同时将其动画化为顶部。 这些jquery是为被点击的同级li元素完成的。

$(document).ready(function() {
  $(".menu li").click(function() {
    $(this).siblings('li').animate({
      top: '-60px'
    }, 'fast');
    $(this).siblings('li').css({
      'opacity': '0'
    });
  });
});

ul>li {
  list-style-type: none;
  line-height: 34px;
  position: relative;
  top: 10px;
  transition: all 2s ease;
}

.menu {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
  <li>Account</li>
  <li>Profile</li>
  <li>History</li>
</ul>

如何为单击的li从当前位置动画到顶部位置并隐藏所有li

2 个答案: