1

我正在使用 font-awesome 4.7.0 css 脚本，以便在一个部分旁边有一个箭头。但是，我真的不明白为什么在展开部分时它不向下旋转。这是带有箭头的 HTML：

            <h5 type="button" data-toggle="collapse" data-target="#L1">Example section <i class="fa fa-angle-double-right arrow"></i></h5>
            <div id="L1" class="collapse table-responsive table-striped">
            <button type="button" class="btn btn-primary mb-3" style="float:right">Export</button>
                <table class="table table-bordered">

根据我自己的想法，这是箭头的 CSS：

#L1.arrow {
    transition: 0.5s all;
    transform: rotate(0deg);
}

#L1.collapse .arrow {
    transition: all 0.5s;
    transform: rotate(90deg);
}

转换仅适用于 CSS 吗？应该有一个JS函数吗？如果是的话，你能指导我吗？

提前谢谢了！

4

1 回答 1

0

#L1.arrow {

你的第一个选择器正在寻找一个 idL1加上 class 的元素arrow。
这些是您的 html 中的两个不同元素，因此您的选择器永远不会匹配任何内容。

#L1.collapse .arrow {

您的第二个选择器正在寻找一个类元素，arrow它是（一个 idL1加上类的元素）的子元素collapse。这个选择器也永远不会匹配。

您可能根本不需要#L1在选择器中指定。

于 2020-05-19T18:32:35.260 回答