JSFiddle - React, Tailwind, and code Playground

by Chris LaFrombois

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="site-navigation">
  <div class="menu-main-menu-container">
    <ul id="primary-menu" class="menu">
      <li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-8 menu-active">
        <a href="#">Root Menu Item</a>
        <ul class="sub-menu">
          <li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68">
            <a href="#">Subchild item</a>
          </li>
          <li id="menu-item-67" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67">
            <a href="#">Subchild item</a>
          </li>
          <li id="menu-item-229" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-229">
            <a href="#">Subchild item with submenu</a>
            <ul class="sub-menu">
              <li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-66">
                <a href="#">Sub-subchild item</a>
              </li>
              <li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65">
                <a href="#">Sub-subchild item</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

CSS

li {
  position: relative;
}

li>.caret {
  display: inline-block;
  position: absolute;
  left: 250px;
  top: 0;
  z-index: 10;
}

.caret::before {
  content: '+';
  display: block;
  width: 25px;
  height: 25px;
  text-align: center;
  font-size: 18px;
}

li.menu-open>.caret::before {
  content: '-';
  display: block;
}

.sub-menu {
  display: none;
  position: relative;
}

.menu-open>.sub-menu {
  display: block;
  z-index: 10;
}

JavaScript

var $menu_item = $('.menu-item-has-children');

$menu_item.append('<span class="caret"></span>');

$('.caret').click(function() {
  $(this).parent().toggleClass('menu-open');
});