Question

我有几个嵌套在父容器下的DIV元素。当用户点击其中一个title时，我想修改另一个cp-anchor上的CSS。我已经尝试了Stack Overflow上发现的几十种方法但由于某种原因它似乎没有按预期工作。任何人都可以帮我指出正确的方向吗？

以下是我正在使用的示例的JSFiddle。

cp-content

Answer 1

您需要.来表示课程选择。

//                     v
$(this).parent().find('.cp-content').css('max-height','none');

$(document).ready(function() {
  $('.cp-anchor').click(function(e) {
    e.preventDefault();

    $(this).parent().find('.cp-content').css('max-height', 'none');
    $(this).remove();
  });
});

.cp-content {
  max-height: 0;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cp-container">
  <div class="cp-content">
    CP CONTENT
  </div>
  <div class="cp-anchor"><span class="cp-anchor-text">Show Full Contents</span></div>
</div>

这是一个香草JS版本：

document.addEventListener("DOMContentLoaded", function() {
  document.querySelectorAll('.cp-anchor')
          .forEach(el => el.addEventListener("click", showContent));

  function showContent(e) {
    e.preventDefault();

    this.parentNode.querySelector('.cp-content').style.maxHeight = 'none';
    this.remove();
  }
});

.cp-content {
  max-height: 0;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cp-container">
  <div class="cp-content">
    CP CONTENT
  </div>
  <div class="cp-anchor"><span class="cp-anchor-text">Show Full Contents</span></div>
</div>

Answer 2

Js中的

使用以下一行代码：

$(this).parent().find('.cp-content').css('max-height','none');

在父DIV下按类查找DIV

2 个答案: