多个多读/少读部分在一个页面上不起作用

本教程将介绍多个多读/少读部分在一个页面上不起作用的处理方法，这篇教程是从别的地方看到的，然后加了一些国外程序员的疑问与解答，希望能对你有所帮助，好了，下面开始学习吧。

问题描述

我对一个页面有多个多读/少读部分。如果我在页面上使用一个多读/少读部分，那就是正常工作，如果我在页面上使用多个部分，那么只有一个部分工作，其他部分不工作。我需要多个分区才能在同一页面上工作。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

const content = document.querySelector(".content-inner");
const contentFull = document.querySelector(".content-full");
const more = document.querySelector(".read-more");
let open = false;

if (more) {
  more.addEventListener("click", (e) => {
 if (open) {
content.removeAttribute("style");
e.target.innerText = "click here";
open = false;
 } else {
content.style.maxHeight = `${contentFull.clientHeight}px`;
e.target.innerText = "read less";
open = true;
 }
  });
}

.read-more {
  display: inline-block;
  margin-top: 10px;
  font-weight: 400;
  cursor: pointer;
  font-size: 14px;
}

<div class="content">
  <div class="content-inner update-modal">
 <div class="content-full">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 </div>
  </div>
  <span class="read-more">click here</span>
</div>

推荐答案

您需要选择相对选择来执行此操作，因为类是重复的。此处，toggleReadMore函数将附加到每个ReadMore类，并对内容内部类执行高度操作操作。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

var prevOpened = null;
function toggleReadMore(e) {
  if(prevOpened !== null && e.target !== prevOpened){
  prevOpened.click();
  }
  // get the current section parent. This will make the selection on other class items easier. 
  var contentSection = e.target.closest('.content');
  var contentInner = contentSection.querySelector('.content-inner');

  if (e.target.textContent === "read less") {
 contentInner.removeAttribute("style");
 e.target.innerText = "click here";
 prevClicked = null;
 return;
  }
  contentInner.style.maxHeight = `${contentSection.querySelector('.content-full').clientHeight}px`;
  e.target.innerText = "read less";
  prevOpened = e.target;
}

var readMoreSections = document.querySelectorAll(".read-more");
readMoreSections.forEach(function(sections) {
  sections.addEventListener("click", toggleReadMore);
})

.read-more {
  display: inline-block;
  margin-top: 10px;
  font-weight: 400;
  cursor: pointer;
  font-size: 14px;
}

.content-inner {
  max-height: 20px;
  overflow: hidden;
}

<div class="content">
  <div class="content-inner update-modal">
 <div class="content-full">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 </div>
  </div>
  <span class="read-more">click here</span>
</div>


<div class="content">
  <div class="content-inner update-modal">
 <div class="content-full">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 </div>
  </div>
  <span class="read-more">click here</span>
</div>

编辑：已更新为仅打开最近单击的项目。

好了关于多个多读/少读部分在一个页面上不起作用的教程就到这里就结束了，希望趣模板源码网找到的这篇技术文章能帮助到大家，更多技术教程可以在站内搜索。