javascript - Jquery Click and Rotation 使用添加/删除类来设置不同的状态

Question

我正在做一个元素，我想在用户点击人字形(SVG 图标)时展开/折叠内容，将图标旋转 90 度以在展开时指向下方，然后将图像向后旋转 90 度以指向就在崩溃的时候。展开功能正常工作，但我在折叠时遇到了问题。我添加/删除类以创建“扩展”与“折叠”状态。新类已正确添加，但是当我将新类定位为折叠时，它什么也不做。我是 jQuery/JS 的新手，所以我的代码不是很动态或干净，但希望能在这里得到一些帮助。提前谢谢大家!

<div class="result">

<div class="result-header">
    <svg id="expand-result-1" class="svg-icon-24 svg-chevron-expand expand-result-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:none;}.cls-2{fill:#2a2d30;}</style></defs><title>24</title><g id="empty_icon_margins"><rect class="cls-1 svg-chevron" width="24" height="24"/></g><g id="next"><polygon class="cls-2 svg-chevron" points="11.4 4.7 9.81 6.3 15.01 11.5 9.81 16.7 11.4 18.3 16.6 13.09 18.19 11.5 16.6 9.91 11.4 4.7"/></g></svg>
    <svg class="svg-icon-24 svg-bcite-distinguished svg-bcite" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:none;}.cls-2{fill:#2a2d30;}</style></defs><title>24</title><g id="empty_icon_margins"><rect class="cls-1" width="24" height="24"/></g><g id="bcite_distinguish"><path class="cls-2" d="M18,4H6A2,2,0,0,0,4,6V18a2,2,0,0,0,2,2H18a2,2,0,0,0,2-2V6A2,2,0,0,0,18,4ZM7.93,17.83,6.17,16.07l9.9-9.9,1.77,1.77Z"/></g></svg>
    <a class="result-title" href="" alt="Result Title" title="Result Title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu magna in nisl fermentum tempor.</a>
</div>

<div class="clear"></div>

<div class="result-content result-content-1" id="result-content-1">
    <p>Cras dapibus quis nulla id porttitor. <span class="principle-highlight">Nullam porttitor mollis dui eu egestas. Sed vestibulum risus quam, eget porta dolor iaculis ac. Sed porttitor gravida augue quis pretium. Pellentesque vitae lobortis nunc.</span> Nam nulla erat, viverra vitae nisl eget, facilisis dictum velit. Nam finibus massa eu dui porttitor faucibus. Nullam ullamcorper, libero nec pellentesque fringilla, tellus ex tempus felis, at tincidunt arcu nisi molestie enim.</p>
</div>

<div class="clear"></div>
</div>

<script type="text/javascript">

$( document ).ready(function() {
$( ".result-content" ).hide();
});

$( ".expand-result-1" ).click(function() {
$( "#result-content-1" ).slideDown("slow");
$(this).rotate({
    angle: 0,
    animateTo:90
});
$('#expand-result-1').addClass('collapse-result-1');
$('#expand-result-1').removeClass('expand-result-1');
console.log( "collapse added" );
});

$(".collapse-result-1").click(function() {
console.log( "collapse clicked" );
$( "#result-content-1" ).slideUp("slow");
$(this).rotate({
    angle: 90,
    animateTo:0
});
$('#expand-result-1').removeClass('collapse-result-1');
$('#expand-result-1').addClass('expand-result-1');
});

</script>

我的想法是...通过使用 slideDown 和预构建，以类 .expand-result-1 为目标启动点击功能，它可以正常工作旋转函数(http://jqueryrotate.com/)。旋转动画也正常工作，类 expand-result-1 被正确删除，类 collapse-result-1 被正确添加。

现在，当我转到目标 collapse-result-1 时，没有任何反应。初始旋转动画正常工作，让我觉得它仍在执行第一次点击功能，即使 expand-result-1 选择器类已被删除/替换。

再次感谢大家提供的任何帮助。正如我所说，我是新手，并且已经进行了大量搜索以找到解决方案，但似乎没有任何适合我的确切情况。

Answer 1

以下是无需任何 JavaScript 即可实现的方法。但是您可以使用 jQuery slideDown 函数让您的 JavaScript 显示/隐藏您的“结果内容”。

https://jsfiddle.net/Zetura/20qgmenh/

.expander {
  display: none;
}

// Rotate SVG chevron
.expander + label svg {
  -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
  transform: rotate(90deg);
  transition: transform 0.3s ease-in-out;
}

.expander:checked + label svg {
  -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
  transform: rotate(-90deg);
}

// Show/Hide the content with slide down
.expander + label + .result-content {
  max-height: 0;
  transition: max-height 0.3s ease-in-out;
  overflow: hidden;
}

.expander:checked + label + .result-content {
  max-height: 600px;
}