Question

我正在尝试在wordpress网站上创建一个推荐部分，该站点上有一个“展开”按钮以显示完整的推荐报价。我希望按钮中的文本在单击后变为“折叠”。我还需要向div包装器添加一个类，以便在按钮处于活动状态时可以实现自定义css样式。我需要粘贴三遍。问题是它在第一次推荐后就失败了。

我使用下面的代码，将其重复了3次（针对三种不同的推荐），并且可以在基本的html文档上使用。但是，当我通过粘贴代码在wordpress网站中实现该代码时，只有第一个证明完全有效。另外两个确实显示/隐藏了我的内部div元素，但它们不会插入.active类或将按钮的文本更改为“折叠”

第二个推荐信都给出

“未捕获的TypeError：无法在控制台中设置属性'innerHTML'为null” 。

例如，这是我要显示的三分之二的推荐。我必须更改它们的ID，以避免javascript冲突。

function showhide() {
  var content = document.getElementById('hidden-content');
  var wrap = document.getElementById('testimonial-wrap');
  var btn = document.getElementById('button1');

  if (content.style.display === 'none') {
    content.style.display = 'block';
    wrap.style.background = 'grey';
    btn.innerHTML = 'COLLAPSE';
    wrap.classList.add('active');
  } else {
    content.style.display = 'none';
    wrap.style.background = 'white';
    btn.innerHTML = 'EXPAND';
    wrap.classList.remove('active');
  }
}

function showhide2() {
  var content2 = document.getElementById('hidden-content2');
  var wrap2 = document.getElementById('testimonial-wrap2');
  var btn2 = document.getElementById('button2');

  if (content2.style.display === 'none') {
    content2.style.display = 'block';
    wrap2.style.background = 'grey';
    btn2.innerHTML = 'COLLAPSE';
    wrap2.classList.add('active');
  } else {
    content2.style.display = 'none';
    wrap2.style.background = 'white';
    btn2.innerHTML = 'EXPAND';
    wrap2.classList.remove('active');
  }
}

<div id="testimonial-wrap" style="background-color: white;">
  <div id="testimonial">
    above testimonial content
    <div id="hidden-content" style="display: none;">
      <p>"hidden content”</p>
    </div>
    <button id="button1" onclick="showhide()">EXPAND</button>
  </div>
</div>


<div id="testimonial-wrap2" style="background-color: white;">
  <div id="testimonial">
    above testimonial content
    <div id="hidden-content2" style="display: none;">
      <p>"hidden content.”</p>
    </div>
    <button id="button2" onclick="showhide2()">EXPAND</button>
  </div>
</div>

Answer 1

我认为这就是您要寻找的。借助jQuery和少量代码，您可以轻松得多。

我没有使用display: none，因为我想将过渡添加到操作中。（过渡不适用于display: none）

$(document).ready(function() {
  $(".toggle-button").on("click", function() {
    $(this).closest(".testimonial-wrap").toggleClass("active");
  });
});

.testimonial-wrap {
  background-color: #C1C1C1;
  padding: 5px;
  margin-bottom: 10px;
}

.testimonial-wrap.active {
  background-color: #0095FF
}

.hidden-content {
  height: 0px;
  visibility: hidden;
  transition: all 0.5s ease-out;
}

.active .hidden-content {
  height: 100px;
  visibility: visible;
  transition: all 0.5s ease-in;
  background-color: rgba(0, 0, 0, 0.5);
}

button {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="testimonial-wrap">
  <div id="testimonial">
    <p>above testimonial content</p>
    <div class="hidden-content">
      <p>"hidden content”</p>
    </div>
    <button id="button1" class="toggle-button">EXPAND</button>
  </div>
</div>


<div class="testimonial-wrap">
  <div id="testimonial">
    <p>above testimonial content</p>
    <div class="hidden-content">
      <p>"hidden content.”</p>
    </div>
    <button id="button2" class="toggle-button">EXPAND</button>
  </div>
</div>

使用按钮和.active CSS类显示显示/隐藏内容

1 个答案: