Q:

Issue recalculating parent height

I'm building a mobile menu. It has three levels. When you click on a link it adds an open class to the clicked link and the next ul. I'm calculating the height of the ul by looping through all it's children and combining the height of each element. This part is working, the issue i'm having is when the second level children are calculated, I need to be able to recalculate the parent ul too, but this needs to happen after the child ul is calculated so it gets the new height.
Test Case: 

Click Parent 1
Click Child 1 (height doesn't recalculate)
Click Parent 1 to close, click again (height has now recalculated)

{
  const primary = document.querySelector(".primary"),
    secondary = document.querySelectorAll(".secondary"),
    children = document.querySelectorAll(".has-children");

  for (let [i, _this] of children.entries()) {
    let currentUL = secondary[i];

    _this.addEventListener("click", e => {
      e.preventDefault();

      // toggle open class
      _this.classList.toggle("open");
      currentUL.classList.toggle("open");

      let children = currentUL.children,
        total = 0;
      for (let x = 0; x < children.length; x++) {
        total = total + children[x].offsetHeight;
      }
      currentUL.classList.contains("open") ?
        (currentUL.style.height = `${total}px`) :
        (currentUL.style.height = 0);
    });
  }
}
.primary {
  max-width: 500px;
  margin: 0 auto;
}

.primary a {
  display: block;
  padding: 20px;
  border-bottom: 1px solid grey;
  font-size: 16px;
  color: green;
}

.secondary {
  height: 0;
  overflow: hidden;
  transition-delay: 0.3s;
  transition: height 0.3s ease;
  margin-left: 38px;
}
<ul class="primary">
  <li>
    <a href="" class="has-children">Parent 1</a>
    <ul class="secondary">
      <li>
        <a href="" class="has-children">Child 1</a>
        <ul class="secondary">
          <li>
            <a href="">1</a>
          </li>
          <li>
            <a href="">2</a>
          </li>
          <li>
            <a href="">3</a>
          </li>
          <li>
            <a href="">4</a>
          </li>
          <li>
            <a href="">5</a>
          </li>
          <li>
            <a href="">6</a>
          </li>
          <li>
            <a href="">7</a>
          </li>
          <li>
            <a href="">8</a>
          </li>
          <li>
            <a href="">9</a>
          </li>
          <li>
            <a href="">10</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

A:

The problem is that when user clicks on text 'Parent 1', the first ul.secondary element height is updated correctly, but when the user clicks on 'Child 1' just the second ul.secondary height is updated correctly but not the first ul.secondary. A possible solution would be to recalculate the parent ul once there is a change in the child, I used a timeout of 0.3 seconds before the calculation of the parent height because of the animation delay.
To check what I'm saying, you can use the dev tools of the browser, tab 'Elements', and see how the property style.height of the elements is modified after each user interaction.
The code I added is after the comment  // This is the code I added

   
    const primary = document.querySelector(".primary"),
          secondary = document.querySelectorAll(".secondary"),
          children = document.querySelectorAll(".has-children");

    for (let [i, _this] of children.entries()) {
        let currentUL = secondary[i];

        _this.addEventListener("click", e => {
            e.preventDefault();

            // toggle open class
            _this.classList.toggle("open");
            currentUL.classList.toggle("open");

            calculateULHeight(currentUL);

             // This is the code I added
             let parentUL = currentUL.parentElement.parentElement;

            if (parentUL.classList.contains('secondary')) {
                setTimeout(function() {
                    calculateULHeight(parentUL);
                }, 300);
            }
        });
    }

    function calculateULHeight(UL) {
        let children = UL.children,
            total = 0;
   
        for (let x = 0; x < children.length; x++) {
            total = total + children[x].offsetHeight;
        }

        UL.classList.contains("open") ?
          (UL.style.height = `${total}px`) :
          (UL.style.height = 0);
    }
.primary {
  max-width: 500px;
  margin: 0 auto;
}

.primary a {
  display: block;
  padding: 20px;
  border-bottom: 1px solid grey;
  font-size: 16px;
  color: green;
}

.secondary {
  height: 0;
  overflow: hidden;
  transition-delay: 0.3s;
  transition: height 0.3s ease;
  margin-left: 38px;
}
<ul class="primary">
  <li>
    <a href="" class="has-children">Parent 1</a>
    <ul class="secondary">
      <li>
        <a href="" class="has-children">Child 1</a>
        <ul class="secondary">
          <li>
            <a href="">1</a>
          </li>
          <li>
            <a href="">2</a>
          </li>
          <li>
            <a href="">3</a>
          </li>
          <li>
            <a href="">4</a>
          </li>
          <li>
            <a href="">5</a>
          </li>
          <li>
            <a href="">6</a>
          </li>
          <li>
            <a href="">7</a>
          </li>
          <li>
            <a href="">8</a>
          </li>
          <li>
            <a href="">9</a>
          </li>
          <li>
            <a href="">10</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

