navbar menu slide down slowly

Question

I have implemented a tree-view navbar. Now I am trying to do when clicking the menu list slides down slowly. But my tried code is not working. How can I do this?

I have mentioned my tried code below -->

<ul>
  <div class="cls2">
    <li>
      <ul class="nested nav nav-pills flex-column tog">
        <li class="nav-item">
          <a>lable</a>
        </li>
      </ul>
    </li>
  </div>
</ul>

Answer 1

只需为您使用 css 滑动的元素添加过渡

transition: all 0.3s; // example

Answer 2

It is possible to use next() to grab the correct body element. Then slideToggle() like this:

$(".treeparent").click(function () {
  $(this).next('.tog').slideToggle();
});

Answer 3

$('.nav-item').on('show.bs.dropdown', function(e){
  $(this).find('.tog').first().stop(true, true).slideDown('fast');
});

$('.nav-item').on('hide.bs.dropdown', function(e){
  $(this).find('.tog').first().stop(true, true).slideUp('fast');
});

Slide up Down Fast is parameter or you can use Slow