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

Multiple read more / read less sections are not working on a page(多个多读/少读部分在一个页面上不起作用)

本文介绍了多个多读/少读部分在一个页面上不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我对一个页面有多个多读/少读部分。如果我在页面上使用一个多读/少读部分,那就是正常工作,如果我在页面上使用多个部分,那么只有一个部分工作,其他部分不工作。我需要多个分区才能在同一页面上工作。 数据-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>

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

这篇关于多个多读/少读部分在一个页面上不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:多个多读/少读部分在一个页面上不起作用

基础教程推荐