为什么从 div onclick 中添加和删除类不起作用？

Question

我正在尝试这样做：单击 a>以显示列表和 a V，再次单击以关闭列表并更改V回>. 这是我的代码

function toggle() {

  var toggleClosed = $(this).find(".toggle-closed");

  var toggleOpened = $(this).find(".toggle-opened");

  if (!$(toggleClosed).is(":visible")) {

    toggleClosed.removeClass('toggle-opened').addClass('toggle-closed');

    toggleOpened.removeClass('toggle-closed').addClass('toggle-opened');

  } else {

    $(toggleClosed).addClass('toggle-closed').removeClass('toggle-opened');

    $(toggleOpened).addClass('toggle-opened').removeClass('toggle-closed');

  }

}

.form-row-filter {

  background-color: grey;

}

.toggle-opened {

  cursor: pointer;

  display: block;

}

.toggle-closed {

  cursor: pointer;

  display: none;

}

.material-icons {

  margin-right: -4px;

  margin-left: 4px;

  vertical-align: middle;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form-row-filter" style="display:inline-block">

  <ul>

    <div class="material-icons toggle-opened" onclick="toggle()">&gt;</div>

    <div class="material-icons toggle-closed" onclick="toggle()">V</div>

    <li class="toggle-closed">

      company a

    </li>

    <li class="toggle-closed">

      company b

    </li>

  </ul>

</div>

这是一个代码笔：

https://codepen.io/thinkvantagedu/pen/MNORvZ?editors=1100

为什么不添加或删除该类？