我正在尝试使用 jQuery 切换类,但我正在努力这样做。我的 HTML 结构和 jQuery 如下所示
<div class="mainFacet bmargin5">
<div class="head line">
<div class="facet-title" title="Click to collapse">
<h2 class="unit-line">Processor</h2>
<span class="icon minus"></span>
</div>
</div>
<ul style="display:inline-block">
<li>i3</li>
<li>i5</li>
<li>i7</li>
</ul>
</div>
jQuery
$('.facet-title').click(function () {
$(this).parent().parent().children("ul").slideToggle();
$(this).attr("title", ($(this).attr("title") == "Click to Collapse") ? "Click to Expand" : "Click to Collapse");
$(this).toggle(function () {
$(this).children("span").removeClass("minus").addClass("plus");
}, function () {
$(this).children("span").removeClass("plus").addClass("minus");
});
});
所以很简单。我希望点击 facet-title 时发生三件事。
- 'ul' 应该从“display:inline-block”切换到“display:none”
- “标题”应从“点击折叠”切换为“点击展开”
- 跨度的类应该从“图标减号”切换到 “图标加号”。 现在,前两个事件发生得很好。它只是第三个没有的事件。我做错了什么?
这是一个demo显示我在前 2 个任务中的进度...
最佳答案
关于javascript - 如何在父点击时为子元素切换多个类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28275737/