我正在尝试这样做:单击 >
以显示列表和 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()">></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
为什么不添加或删除类?
最佳答案
这是您修复的代码: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');
}
关于javascript - 为什么在 div onclick 中添加和删除类不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57361600/