CSS如何添加滑动过渡

Question

我有一个滑动子菜单内容的sidenav菜单工作的以下小提琴演示。我在没有使用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>

​

Answer 2

您可以使用slideToggle()，因此可以避免更改类。这只是一种选择

此外，请记住，子菜单必须位于父li中，例如<li>Home<ul><li>Sub link</li></ul></li>。我相应地更改了您的HTML

请参阅下面的代码片段

​

$(document).ready(function() {
    $('.parent').click(function() {
         $(this).children(".submenu").slideToggle()
     });
  });

body, html {
    height: 100%;
    margin: 0;
    overflow:hidden;
}

#sidebar {
    background: #DF314D;  
    width: 240px;
    height: 100%;
}

#sidebar ul {
    padding: 0;
    list-style: none;
}

#sidebar ul li {
    padding: 15px 20px 15px 35px;
    color: white;
}

#sidebar li:hover { 
    background: #C9223D;
}

.submenu {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">
  <ul>
    <li class="parent">Home  
    <ul class="submenu">
      <li>Home 1</li>
      <li>Home 2</li>
      <li>Home 3</li>
    </ul>   
    </li>
    <li>Explore</li>
  </ul>                  
</div>

​