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

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

数据-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>

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