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>

CSS如何添加滑动过渡

2 个答案: