javascript - 为什么从 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

为什么不添加或删除类？

标签： javascriptjquerycss

Answer 1

这是您修复的代码：https ://codepen.io/anon/pen/BXmgdo

错误在JS中：

function toggle () {

  var toggleClosed = $('.toggle-closed');
  var toggleOpened = $('.toggle-opened');

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