javascript - 崩溃事件中的行食物

Question

我正在研究通过鼠标单击折叠事件的示例:

JSFFIDDLE Example

如何对齐箭头和问题？此外，当我展开问题时，箭头未完全旋转。这些问题有什么解决方案吗？

HTML:

<div class="container faq_wrapper">
    <div class="row">
        <div class="span10 offset1">
            <p>
                &nbsp;</p>
            <div class="faq-all-actions">
                <a class="faq-expand">Expand All</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a class="faq-collapse">Collapse All</a></div>
        </div>
    </div>
    <div class="row">
        <div class="span10 offset1">
            <div class="question-wrapper">
                <div class="arrows">
                    &nbsp;</div>
                <div class="big-q">
                    Q</div>
                <div class="question">
                    <div class="arrow" ></div><h6><font size="6">Can I try the software before I buy it?</font></h6></div>
                <div class="answer-wrapper">
                    <div class="big-a">
                        A</div>
                    <div class="answer">
                        Yes! Simply <a href="/trial">download a free trial</a> and you&#39;ll have instant access to all features for 30 days, absolutely free. We don&#39;t require your credit card details or any commitment.</div>
                </div>
            </div>    
        </div>
    </div>
</div>

CSS:

.answer-wrapper {
    display: none;
}


.arrow::before {
    position: absolute;
     content: "";
    display: inline-block;
    /* By using an em scale, the arrows will size with the font */
    width: 0.4em;
    height: 0.4em;
    border-right: 0.2em solid black;
    border-top: 0.2em solid black;
    transform: rotate(45deg);
    margin-right: 0.9em;

}

.arrow.down::before {
  transform: rotate(90deg);
  transition: transform .25s;
}

.question h6 {
    margin-left: 15px;
}

Answer 1

添加:

.arrow::before {
    margin-top: 15px;
}

并将 transform: rotate(90deg); 更改为:

.arrow.down::before {
    transform: rotate(135deg);
}

如果您要保持当前字体大小的快速修复