проблема навигационного меню с toggleClass

Question

У меня есть меню на моем сайте WordPress. Код никогда не добавляет «open» при нажатии, я не знаю почему.

Когда я нажимаю, у него есть другой код, который добавляет класс «sfHover» в # menu-item-300.

$(document).ready(function() {
  $('#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4').click(function() {
    $(this).toggleClass('open');
  });
});

.open {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li id="menu-item-300" class="mega-menu menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor menu-item-has-children menu-item-300">
    <a>
      <div id="nav-icon1">
        <span></span>
        <span></span>
        <span></span>
      </div>
      <span role="presentation" class="dropdown-menu-toggle" aria-expanded="false"></span>
    </a>
  </li>
</ul>