javascript - 如何在ReactJS中单击时旋转伪元素，其内容是SVG

Question

[我的元素的图像]

[1]:/image/a6EFH.png

[2]:/image/lMhNu.png

当我单击橙色箭头时，我想将其旋转(180 度)

这可以用 CSS 来完成还是我应该使用 JS

以及如何在 ReactJS 中声明一个变量并给它一个伪元素作为值

<div className="container">
        <div className="imgBox">
          <img src={img_1} alt="img_1" className="img_1" />
          <img src={img_2} alt="img_2" className="img_2" />
        </div>

        <div className="textBox">
          <h1>FAQ</h1>
          <div className="questions">
            <div>
              <button
                onClick={() => {
                  hideText(p1);
                }}
              >
                How many team members can I invite?
              </button>
              <p ref={p1} className="p1 not-active">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />

            <div>
              <button
                onClick={() => {
                  hideText(p2);
                }}
              >
                How many team members can I invite?
              </button>
              <p ref={p2} className="p2 not-active">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />

            <div>
              <button
                onClick={() => {
                  hideText(p3);
                }}
              >
                How many team members can I invite?
              </button>
              <p ref={p3} className="p3 not-active">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />

            <div>
              <button
                onClick={() => {
                  hideText(p4);
                }}
              >
                How many team members can I invite?
              </button>
              <p ref={p4} className="p4 not-active">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />

            <div>
              <button
                onClick={() => {
                  hideText(p5);
                }}
              >
                How many team members can I invite?
              </button>
              <p ref={p5} className="p5 not-active">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />
          </div>
        </div>
      </div>

样式

.container>.textBox>.questions>div>button {
  width: 100%;
  height: 30px;
  background: transparent;
  color: var(--Very-dark-grayish-blue);
  font-size: 15px;
  text-align: left;
  border: 0;
  cursor: pointer;
  outline: none;
}

.container>.textBox>.questions>div>button:hover {
  color: var(--Soft-red);
}

.container>.textBox>.questions>div>button:focus {
  font-weight: bold;
}

.container>.textBox>.questions>div>button::after {
  content: url(./images/icon-arrow.svg);
  float: right;
}

.container>.textBox>.questions>div>button::after:focus {
  transform: rotate(180deg);
}

Answer 1

您还没有发布您的标记，但是您可以使用 <details> 仅使用 html/css 来更清晰地完成此操作披露要素。请阅读 MDN 文档:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

您可以完全控制它的样式，包括隐藏标记伪元素。在这个线程中有一个具体的答案，您会发现它很有用:HTML Details/Summary Element Marker Styling

这是一个入门片段。我也用 css 制作了箭头，因为我没有你的 svg。您需要替换 :after 的内容选择器与您的背景图像等，再次为 [open]选择器。

details {
  width: 400px;
  border: 1px solid #ccc;
  padding: 10px;
}

details summary:after {
  border-bottom: 2px solid orange;
  border-right: 2px solid orange;
  content: "";
  display: inline-block;
  height: 7px;
  margin: 2px 0.5rem 0 0;
  float: right;
  transform: rotate(45deg);
  width: 7px;
}

details summary::-webkit-details-marker,
details summary::marker {
  display: none;
  content: "";
}

details[open]>summary:after {
  transform: rotate(-135deg) translate(-4px, -3px);
}

<details>
  <summary>Section title</summary>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</details>