为什么从 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为什么不添加或删除该类？