我有几个嵌套在父容器下的DIV元素。当用户单击这些cp-anchor之一时,我想在另一个cp-content上修改CSS。我尝试了Stack Overflow上发现的数十种方法,但是由于某种原因,它似乎并没有按预期工作。谁能帮助我指出正确的方向?

这是我正在使用的示例的JSFiddle

    <script type="text/javascript">

    $( document ).ready(function()
    {
        $('.cp-anchor').click(function(e)
        {
            e.preventDefault();

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

    </script>

<div class="cp-container">
    <div class="cp-content">
        <table id="tablepress-4">
        </table>
    </div>
    <div class="cp-anchor"><span class="cp-anchor-text">Show Full Contents</span></div>
</div>

最佳答案

您需要.表示选择的班级。

//                     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>

关于javascript - 在父DIV下按类别查找DIV,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46433057/

10-12 00:21
查看更多