如何使按钮包装器之后的每个后续兄弟消失并通过按下这个按钮再次恢复其可见性？

Question

我在页面上有 2 个按钮，“阅读更多”和“阅读更少”，它们是使用 WP 中的页面生成器创建的。我试图在页面加载时隐藏“阅读更多”按钮之后的所有元素。单击按钮后，我希望显示“阅读更多”：无；然后“阅读更多”按钮后隐藏的每个元素都可见，然后该按钮被隐藏，而“阅读较少”按钮可见，反之亦然。

到目前为止，我有这段代码，它将显示父元素，然后显示所有兄弟元素（不包括我想要作为起点的元素）。我看过很多视频，我确信有一种更简单的方法可以实现这一目标，但必须以某种方式完成。

const readMore = document.getElementById("read-more");
const readLess = document.getElementById("read-less");

var getSiblings = function(elem) {

  // Setup siblings array and get the parent
  var siblings = [];
  var sibling = elem.parentNode.firstChild;

  // Loop through each sibling and push to the array
  while (sibling) {
    if (sibling.nodeType === 1 && sibling !== elem) {
      siblings.push(sibling);
    }
    sibling = sibling.nextSibling;
  }

  return siblings;
};

<body>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.
  </div>
  <div class=".et_pb_button_0_wrapper">
    <button>
            <a href="#" target="_blank" id="read-more">READ MORE</a>
        </button>
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.
  </div>

  <div>
    <button>
            <a href="#" target="_blank" id="read-less">READ LESS</a>
        </button>
  </div>
</body>

Answer 1

在这里添加一点 CSS 和 JS，将会创造奇迹：

.read-more.activated,
.read-more:not(.activated) ~ :is(p, button) {
  display: none;
}

此片段声明：

当
```
.read-more
```
按钮具有
```
.activated
```
类时，它将不会显示
当
```
.read-more
```
按钮not 具有
```
.activated
```
类时，其后面的所有
```
<p>
```
或
```
<button>
```
元素（作为后续兄弟元素）将不会显示

然后，您的 JavaScript 需要提供的只是：

当单击
```
.read-more
```
按钮时，
```
.activated
```
类将添加到
```
.read-more
```
按钮；和
单击
```
.read-less
```
按钮时，
```
.activated
```
类将从
```
.read-more
```
按钮中删除。

工作示例：

const readMoreButton = document.querySelector('.read-more');
const readLessButton = document.querySelector('.read-less');

const activateReadMoreButton = () => {
  readMoreButton.classList.add('activated');
}

const deactivateReadMoreButton = () => {
  readMoreButton.classList.remove('activated');
}

readMoreButton.addEventListener('click', activateReadMoreButton);
readLessButton.addEventListener('click', deactivateReadMoreButton);

.read-more.activated,
.read-more:not(.activated) ~ :is(p, button) {
  display: none;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.</p>
<button type="button" class="read-more">READ MORE</button>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.</p>
<button type="button" class="read-less">READ LESS</button>

Answer 2

首先，不需要将链接放置在按钮内。

其次，人们甚至不必对

“阅读更多”

按钮周围的 <div/> 包装进行分类。

人们可以用最少的努力解决方案来实现OP正在寻找的东西，该解决方案不涉及任何类名，但......

a) 主要使用功能性
```
:has()
```
伪类和后续兄弟组合器
b) 另外还在两个按钮上注册一个事件处理程序，其中两个处理程序仅处理与 “阅读更多” 相关的按钮元素的
```
disabled
```
属性/状态。

该实现的占用空间如下所示...

document
  .querySelector('#read-more')
  .addEventListener('click', ({ currentTarget: elmReadMore }) =>

    elmReadMore.disabled = true
  );

document
  .querySelector('#read-less')
  .addEventListener('click', () =>

    document.querySelector('#read-more').disabled = false
  );

div:has(#read-more:disabled),
div:has(#read-more:not(:disabled)) ~ * {
  display: none;
}
button[id] {
  text-transform: uppercase;
  /* text-transform: capitalize; */
}

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.</div>
<!-- <div class="et_pb_button_0_wrapper"> -->
<div>
  <button id="read-more">Read more</button>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.</div>
<div>
  <button id="read-less">Read less</button>
</div>

如何使按钮包装器之后的每个后续兄弟消失并通过按下这个按钮再次恢复其可见性？

问题描述投票：0回答：2

2个回答

最新问题

如何使按钮包装器之后的每个后续兄弟消失并通过按下这个按钮再次恢复其可见性？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2