单击即可使用纯Javascript添加样式

Question

在jQuery中，我知道如何解决此问题，但是在纯Javascript中，我没有任何想法。

当在人字形下单击我的内容显示时，但在显示时我想将人字形更改为人字形。

我不知道如何进行“点击”更改样式并设置以下内容：

transform: rotate(180deg);。

切换效果，当再次单击以使V形向下并反复返回时。

JSFiddle

HTML：

<p>
Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu Lorem ipsum dolor sit amet consedier tu 
</p>
<div id="show-more-footer" onclick="myFunction()">
   <i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>


<div id="full-text">
  <div class="col-sm-3">
    <ul>
      <li><a href="#">Seo Link</a></li>
      <li><a href="#">Seo Link nummer</a></li>
      <li><a href="#">Number 3 Seo Link</a></li>
      <li><a href="#">Seo</a></li>
    </ul>
  </div>
  <div class="col-sm-3">
    <ul>
      <li><a href="#">Seo Link</a></li>
      <li><a href="#">Seo Link nummer</a></li>
      <li><a href="#">Number 3 Seo Link</a></li>
      <li><a href="#">Seo</a></li>
      <li><a href="#">Number 5</a></li>
    </ul>
  </div>
  <div class="col-sm-3">
    <ul>
      <li><a href="#">Seo Link</a></li>
      <li><a href="#">Seo Link nummer</a></li>
      <li><a href="#">Number 3 Seo Link</a></li>
      <li><a href="#">Seo</a></li>
    </ul>
  </div>
</div>

JS：

function myFunction() {
    var x = document.getElementById('full-text');
    if (x.style.display === 'block') {
        x.style.display = 'none';
    } else {
        x.style.display = 'block';
    }
}

CSS：

#show-more-footer{
  cursor:pointer;
}
#full-text{
  display:none;
}

Answer 1

您可以直接在JavaScript中更改元素的样式：

element.style.transform = "rotate(180deg)";

这将在HTML中显示为：

<div id="element-id" style="transform: rotate(180deg);"></div>

您还可以使用classList API和JS：

.reverse {
    transform: rotate(180deg);
}

和JS：

element.onclick = function() {
 element.classList.toggle("reverse");
}

MDN-element.classList
CanIUse -classList
某些浏览器不支持该.toggle()方法的事实不是问题，请使用使用.add()或的自定义函数.remove()。

最后建议（可选）：
我将使用具有此类功能（如）的CSS过渡，transition: all 0.3s ease-in-out;并通过将height:0和设置为overflow:hidden您隐藏的内容以及onclick您给他的V形字形来更改隐藏/显示方法element.style.height: auto。