Event problem 2

Event target checked by link parent class name.

by Creak

HTML

<div id=listwrap>
  <ul class="parentlist">
    <li class="item">
      <a href="#">*</a>
    </li>
    <li class="parentitem">
      <a href="www.google.com">Open</a>
      <ul class="childlist">
        <li class="childitem">
          <a href="www.google.com">Google</a>
        </li>
        <li class="childitem">
          <a href="www.google.com">Google</a>
        </li>
        <li class="childitem">
          <a href="www.google.com">Google</a>
        </li>
      </ul>
    </li>
    <li class="item">
      <a href="#">*</a>
    </li>
  </ul>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

a {
  display: inline-block;
  width: 100%;
  padding: 20px 0;
}

ul {
  list-style-type: none;
  width: 100%;
  position: relative;
}

.parentlist a {
  color: #e8e8e8;
  background-color: #7f7f7f;
}

li {
  display: inline-block;
  width: 20%;
  text-align: center;
}

.childlist {
  display: none;
  position: absolute;
  width: 20%;
}

.childlist.active {
  display: block;
}

.childlist li {
  width: 100%;
}

.childlist a {
  color: #323232;
  background-color: #e2e2e2;
}

.childlist a:hover {
  color: #e8e8e8;
}

#msgbox {
  width: 100%;
  margin-top: 250px;
  font-size: 24px;
}

a:hover {
  background-color: #444;
}

JavaScript

function childToggle(event) {

  if (event.target.parentNode.className === 'parentitem') {

    event.preventDefault();
    event.stopPropagation();

    var child = this.querySelector('ul');
    !child.classList.contains('active') 
      ? actions(true, 'Close', 'Child open...') 
      : actions(false, 'Open', 'Child closed.');
  }

  function actions(add, parentTxt) {
    add
      ? child.classList.add('active') 
      : child.classList.remove('active');

    child.previousElementSibling.innerHTML = parentTxt;
  }
}

document.querySelector('.parentitem').addEventListener('click', childToggle, true);