Question

有人可以告诉我我的错误发生在哪里吗？这是一个下拉菜单，但不执行过渡操作。我玩了几个小时，但找不到错误。

    var allHasChildren = document.querySelectorAll(".item-has-children a");
for (var x = 0; x < allHasChildren.length; x++) {
    allHasChildren[x].onclick = function() {
        // get the first submenu and toggle using classes
        var subMenu = this.parentNode.getElementsByClassName("sub-menu")[0];
        if (subMenu.classList.contains('selected')) {
            subMenu.classList.remove("selected");
        } else {
            subMenu.classList.add("selected");
        }
    }
}

      .sub-menu {
    display: none;
}
.sub-menu.selected {
    display: block;
    transition: transform 0.2s;
}

<ul>
    <li class="item-has-children">
        <a href="#0">December</a>
        <ul class="sub-menu">
            <li><a href="blogproto.html#3">Sub Item One</a></li>
            <li><a href="#5">Sub Item Two</a></li>
            <li><a href="#4">Sub Item Three</a></li>
            <li><a href="#3">Sub Item Four</a></li>
            <li><a href="#2">Sub Item Five</a></li>
            <li><a href="#1">Sub Item Six</a></li>
        </ul>
    </li>
    <li class="item-has-children">
        <a href="#0">November</a>
        <ul class="sub-menu">
            <li><a href="#x">Sub Item One</a></li>
            <li><a href="#0">Sub Item Two</a></li>
            <li><a href="#0">Sub Item Three</a></li>
            <li><a href="#0">Sub Item Four</a></li>
            <li><a href="#0">Sub Item Five</a></li>
            <li><a href="#0">Sub Item Six</a></li>
        </ul>
    </li>
</ul>

我的错误在哪里？

谢谢

Answer 1

您不能在显示属性上设置过渡，就像在该问题中看到的那样：Transitions on the display: property。

相反，您可以发挥高度，即可见性。

Answer 2

无法转换display，但是，您可以转换元素的opacity。如果在隐藏部分时将opacity设置为0，并在显示该部分时将其转换为1，则可以得到淡入效果。要获得其他效果，您也可以切换该部分的max-height。您还必须更改元素的visibility，以使其在隐藏和显示时表现出预期的效果：

var allHasChildren = document.querySelectorAll(".item-has-children a");
for (var x = 0; x < allHasChildren.length; x++) {
  allHasChildren[x].onclick = function() {
    // get the first submenu and toggle using classes
    var subMenu = this.parentNode.getElementsByClassName("sub-menu")[0];
    if (subMenu.classList.contains('selected')) {
      subMenu.classList.remove("selected");
    } else {
      subMenu.classList.add("selected");
    }
  }
}

.sub-menu {
  visibility: hidden;
  opacity: 0;
  max-height: 0;
  transition: opacity 2.3s, max-height 0.6s ease-in;
  -webkit-transition: opacity 2.3s, max-height 0.6s ease-in;
}

.sub-menu.selected {
  visibility: visible;
  opacity: 1;
  max-height: 300px;
  transition: opacity 2.3s, max-height 1.2s ease-out;
  -webkit-transition: opacity 2.3s, max-height 1.2s ease-out;
}

<ul>
  <li class="item-has-children">
    <a href="#0">December</a>
    <ul class="sub-menu">
      <li><a href="blogproto.html#3">Sub Item One</a></li>
      <li><a href="#5">Sub Item Two</a></li>
      <li><a href="#4">Sub Item Three</a></li>
      <li><a href="#3">Sub Item Four</a></li>
      <li><a href="#2">Sub Item Five</a></li>
      <li><a href="#1">Sub Item Six</a></li>
    </ul>
  </li>
  <li class="item-has-children">
    <a href="#0">November</a>
    <ul class="sub-menu">
      <li><a href="#x">Sub Item One</a></li>
      <li><a href="#0">Sub Item Two</a></li>
      <li><a href="#0">Sub Item Three</a></li>
      <li><a href="#0">Sub Item Four</a></li>
      <li><a href="#0">Sub Item Five</a></li>
      <li><a href="#0">Sub Item Six</a></li>
    </ul>
  </li>
</ul>

Answer 3

您无法转换显示。但是，您可以更改最大高度并获得漂亮的动画。我已经举了一个简单的例子说明如何使其工作

$("#myItem").on("click", function(){
  if( $('.sub-menu').hasClass('reveal'))
  {
     $('.sub-menu').removeClass('reveal');
  }
  else {
   $('.sub-menu').addClass('reveal');
   $('.sub-menu').addClass('transition');
  }
});

.sub-menu {
  overflow:hidden;
  display:block;
  max-height:0;
}

.transition
{
   transition:max-height 3.3s ease-out; 
}

.reveal 
{
  max-height:200px;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="item-has-children">
  <a href="#0" id="myItem">December</a>
  <ul class="sub-menu">
    <li><a href="blogproto.html#3">Sub Item One</a></li>
    <li><a href="#5">Sub Item Two</a></li>
    <li><a href="#4">Sub Item Three</a></li>
    <li><a href="#3">Sub Item Four</a></li>
    <li><a href="#2">Sub Item Five</a></li>
    <li><a href="#1">Sub Item Six</a></li>
  </ul>
</li>

下拉菜单中的错误

3 个答案: