>

BS4를 사용하여 아코디언을 만들고 있습니다.

카드의 본체가 열렸을 때 숨기고 싶은 카드 헤더 각각에 배경 이미지가 있고 카드 본체가 닫힐 때 표시됩니다.

종료 목표는 닫힌 카드에 모든 이미지를 표시하고 열린 카드에 이미지를 숨기는 것입니다.

전체 아코디언은 forEach ();내 ID가 해당 루프의 색인을 사용하고 있습니다.

닫고있는 카드의 이미지를 표시하는 함수를 동시에 호출하면서 닫는 카드의 이미지를 숨기는 함수를 어떻게 안정적으로 호출합니까?

현재 HTML :

<div id="accordion">
    <div class="card">
        <!-- the img I want to toggle opacity on: -->
        <img class="card-img center-cropped" id="cardHeaderBG'+ index +'" src="'+ item.cover_big +'"> </img>
        <div class="card-header card-img-overlay" id="heading' + index + '">' +
            <button class="btn btn-link collapsed" id="wrapper" data-toggle="collapse" data-target="#collapse' + index + '">
            ... content ...
            </button>
        </div>
        <div id="collapse' + index + '" class="collapse" aria-labelledby="heading' + index + '" data-parent="#accordion">
            <div class="card-body">
                ... content ...
            </div>
        </div>
    </div>
</div>

현재 JS :

$(function() {
  $(".collapse").on('show.bs.collapse', function(e) {
    $(this).siblings("img").animate({opacity: 0})
  })
});

$(function() {
  $(".collapse").on('hide.bs.collapse', function(e) {
    $(this).siblings("img").animate({opacity: 1})
  })
});

감사합니다. 기꺼이 제공하고자하는 모든 지침에 감사드립니다.

  • 답변 # 1

    아래 코드를 확인하십시오

    HTML :이미지를 .img 클래스를 사용하여 div에 래핑했습니다.

    <div id="accordion">
        <div class="card">
            <!-- the img I want to toggle opacity on: -->
            <div class="img"><img class="card-img center-cropped" id="cardHeaderBG'+ index +'" src="'+ item.cover_big +'"></div>
            <div class="card-header card-img-overlay" id="heading' + index + '">' +
                <button class="btn btn-link collapsed" id="wrapper" data-toggle="collapse" data-target="#collapse' + index + '">
                ... content ...
                </button>
            </div>
            <div id="collapse' + index + '" class="collapse" aria-labelledby="heading' + index + '" data-parent="#accordion">
                <div class="card-body">
                    ... content ...
                </div>
            </div>
        </div>
    </div>
    
    

    JS :

    $('.collapse').each(function() {
      var targetColls = $(this);
      targetColls.on('hide.bs.collapse', function () { 
        $(this).closest('.card').find('.img').addClass('img-show');
      });
      targetColls.on('show.bs.collapse', function () {
        $(this).closest('.card').find('.img-show').removeClass('img-show');
      });
    });
    
    

    CSS :

    .card .img {
      position: relative;
      height: 0;
      overflow: hidden;
      transition: height .35s ease;
    }
    .img-show {
      height: auto;
    }
    
    

  • 이전 find - jquery - 특정 열 값을 포함하는 행 뒤에 새 행을 삽입하십시오
  • 다음 for loop - 아르 자형 - 조건부로 여러 변수 생성 (인자 백분율)