toggle类不起作用

toggle class Does not work

本文关键字：不起作用 toggle      更新时间：2023-09-26

我有这样的跨度：

<span class="read_more"> Read More </span>

和一些类似的div：

<div class="tab_inner">
    .
    .
    .
    .
</div>

如何为它们切换类(active(

这是我的代码：

var showTab = document.getElementsByClassName("read_more");
var tabContent = document.getElementsByClassName("tab_inner");
function showTabContent(event) {
    for (var i = 0; i < showTab.length; i++) {
        showTab[i].addEventListener('click', function() {
            tabContent.toggle('active');
        });
    }
}

而且我不能用document.getElementsByClassName获得DOM或函数中的CCD_ 3。仅CCD_ 4起作用。

我该怎么办？

您只能在单个元素上的classList上运行切换。我已经在下面修改了你的代码

var showTab = document.getElementsByClassName("read_more");
var tabContent = document.getElementsByClassName("tab_inner");
function showTabContent() {
  for (var i = 0; i < showTab.length; i++) {
    (function(index) {
      showTab[i].addEventListener('click', function() {
        tabContent[index].classList.toggle('active'); // I have assumed each read more has a corresponding tab content
      });
    })(i);
  }
}
showTabContent();
.tab_inner.active {
  color: red;
}
<div class="read_more">read more</div>
<div class="tab_inner">tab content</div>
<div class="read_more">read more</div>
<div class="tab_inner">tab content</div>

您可以调用Element.classList的方法toggle()，这是一个只读属性，它返回元素的类属性的实时DOMTokenList集合。

代码：

var showTab = document.getElementsByClassName('read_more'),
    tabContent = document.getElementsByClassName('tab_inner');
Array.prototype.forEach.call(showTab, function(elem, index) {
  elem.addEventListener('click', function() {
    tabContent[index].classList.toggle('active'); 
  });
});
.read_more {
    cursor: pointer;
}
.tab_inner.active {
  color: red;
}
<span class="read_more">Read More</span>
<div class="tab_inner">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, dignissimos.</p>
</div>
<span class="read_more">Read More</span>
<div class="tab_inner">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quam dolor quae error eligendi numquam ipsum. Assumenda modi, explicabo.</p>
</div>

还要注意的是，您可以通过调用array的forEach()方法来像HTMLCollection一样迭代数组。

相关文章：