Bug in dropdown menu

Question

Can somebody tell me where my mistake was done? It's a dropdown menu but it doesn't do the transition thing. I played around with it several hours but cant find the bug.

    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>

Where is my mistake?

Thank you

score 1 · Answer 1 · answered Nov 24 '18 at 11:43

1

You cannot set a transition on the display property as you can see in that question : Transitions on the display: property.

Instead you can play with the height, the visibility.

answered Nov 24 '18 at 11:43

Nico_

1,388
17
31

Nick Parsons · Answer 2 · 2018-11-24T12:28:54.103

Transitioning display isn't possible, however, you can transition the opacity of the element. If you set the opacity to 0 when the section is hidden, and transition it to 1 when it is shown, you can get a fade in effect. To get other effects, you can toggle the max-height of the section as well. You also must change the visibility of the element to go it to behave as expected when hidden and shown:

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>

Alex Leo · Answer 3 · 2018-12-23T18:45:55.483

You cannot transition display. However you can change the max-height and achieve a nice animation. I have made a simple example on how to make it work

$("#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>

Bug in dropdown menu

3 Answers3