javascript - CSS如何添加滑动过渡

Question

我有以下带有滑动子菜单内容的工作 sidenav 菜单的 fiddle 演示。我在不使用 Jquery 的情况下进行了相同的演示(实际上首先使用纯 JS，然后通过 CSS 悬停选择器而不是单击)，在我的情况下，子菜单不会以相同的方式滑动/动画。

.submenu {
  display: none;
}

.parent:hover .submenu,.submeun:hover {
  display: block;
}

该动画是由于 Jquery 切换方法造成的吗？

$(document).ready(function() {
    $('.parent').click(function() {
         $('.submenu').toggle('visible');
     });
  });

我如何在不使用 jquery 的情况下通过 css 或纯 JS 复制相同的方法，因为我不想仅将 jquery 用于一个简单的滑动动画。

JSFIDDLE

Answer 1

这边？

document.getElementById('home').addEventListener('click', function(e) {
  var nextEl = e.target.nextElementSibling;

  if(!nextEl.classList.contains('submenu')) {
    return false;
  }

  if(nextEl.classList.contains('show')) {
     nextEl.classList.remove('show')
  }
  else {
     nextEl.classList.add('show');
  }
});

.submenu {
  -webkit-transition: max-height 1s;
  -moz-transition: max-height 1s;
  -ms-transition: max-height 1s;
  -o-transition: max-height 1s;
  transition: max-height 1s;
  background: #e5feff;
  overflow: hidden;
  max-height: 0;
}
.submenu.show {
  max-height: 300px;
}

<div id="sidebar">
  <ul>
    <li id="home" class="parent">Home</li>
    <li class="submenu"><ul >
      <li>Home 1</li>
      <li>Home 2</li>
      <li>Home 3</li>
    </ul>   </li>
    <li>Explore</li>
  </ul>                  
</div>