>

부모 컨테이너 아래에 여러 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>

  • 답변 # 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;
    }
    
    

    <시간>

    바닐라 JS 버전입니다 :

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

    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;
    }
    
    

  • 답변 # 2

    Js에서는 다음 코드 한 줄을 사용합니다.

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

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

관련 자료

  • 이전 c# - XamarinForms에서 동적으로 3 개의 피커 세트 만들기
  • 다음 android - 프로그래밍 방식으로 생성 된 확인란의 값을 다음 액티비티로 이전 하시겠습니까?