Question

在jQuery中，我知道如何解决这个问题，但在纯Javascript中我不知道。

当点击雪佛龙时，我的内容显示，但是当显示我想改变雪佛龙是雪佛龙。

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

transform: rotate(180deg);。

切换效果，再次点击可以将雪佛龙向下并重复播放。

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设置为您的内容来更改隐藏/显示方法隐藏你给他的{vvron onclick element.style.height: auto。

Answer 2

我的第一个建议是不使用内联javascript来调用你的函数，你应该使用一个监听器

var button = document.getElementById('show-more-footer');
button.addEventListener('click', myFunction);

然后你可以使用callback first参数来获取你的事件

function myFunction(event) {
        var button = event.currentTarget;
    var x = document.getElementById('full-text');
    if (x.style.display === 'block') {
        x.style.display = 'none';
        button.querySelector('i').style.transform = 'rotate(0)'
    } else {
        x.style.display = 'block';
        button.querySelector('i').style.transform = 'rotate(180deg)'
    }
}

纯Javascript在点击时添加样式

HTML：

JS：

CSS：

2 个答案: