홈>2020-03-18 20:27

javascript - 부트 스트랩 아코디언 - 시작 및 종료 카드의 요소에서 별도의 함수 호출

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

Python2.net

javascript - 부트 스트랩 아코디언 - 시작 및 종료 카드의 요소에서 별도의 함수 호출

관련 자료