페이지의 나머지 부분이 렌더링 될 때까지 기다리지 않고 클릭 즉시 아이콘이 변경되도록하려면 어떻게해야합니까?

debugcn 에 게시 Dev

Altwood

Boostrap Collapse를 사용하여 아코디언 효과를 만들고 있습니다.

확장하려면 아래로 아이콘을 표시하고 jquery 클릭 이벤트를 사용하여 축소하려면 위로 아이콘을 표시하도록 버튼을 사용자 정의했습니다.

HTML

<div id="accordion">
  <div class="card bg-primary myRounded">
    <div class="card-eader bg-white myRounded" id="headingTwo">
      <h5 class="mb-0">
        <button id="btnExpand" class="btn btn-link float-right collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseTwo">
          <i class="fas fa-chevron-circle-down fa-2x"></i>
        </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.    
      </div>
    </div>
  </div>
</div>

그리고 jquery.

$('#btnExpand').click(function() {
  $('.collapse')
    .on('shown.bs.collapse', function() {
      $(this)
        .parent()
        .find(".fa-chevron-circle-down")
        .removeClass("fa-chevron-circle-down")
        .addClass("fa-chevron-circle-up");
    })
    .on('hidden.bs.collapse', function() {
      $(this)
        .parent()
        .find(".fa-chevron-circle-up")
        .removeClass("fa-chevron-circle-up")
        .addClass("fa-chevron-circle-down");
    });
});

여기에서 예를 찾을 수 있습니다.

jsfiddle

내가 가진 문제는 아이콘을 클릭 할 때 즉시 변경되지 않고 확장 / 축소 드롭 다운이 먼저 렌더링 될 때까지 기다린다는 것입니다. 아래쪽 화살표를 클릭하면 위쪽 아이콘이 표시되기 전에 약간의 지연이 있으며 그 반대의 경우도 마찬가지입니다.

버튼을 클릭하자마자 아이콘이 변경되도록이 동작을 변경할 수 있습니까?

감사

로리 맥 크로 산

첫째, #btnExpand클릭 핸들러가 필요하지 않습니다. 페이지가로드 될 때 부트 스트랩 이벤트를 수신해야합니다.

문제 자체는 애니메이션이 끝날 때만 실행 되는 shown및 hidden이벤트를 사용하고 있기 때문 입니다. 애니메이션이 시작될 때 작업을 수행하려면 대신 및을 사용하십시오. 참고 로 이러한 이벤트의 동작을 다루는 Bootstrap 문서가 있습니다.showhide

toggleClass()따로 addClass()/ removeClass()호출 대신 사용하여 논리를 향상시킬 수도 있습니다 .

$('.collapse').on('show.bs.collapse', function() {
  $(this).parent().find(".fa-chevron-circle-down").toggleClass("fa-chevron-circle-down fa-chevron-circle-up");
}).on('hide.bs.collapse', function() {
  $(this).parent().find(".fa-chevron-circle-up").toggleClass("fa-chevron-circle-up fa-chevron-circle-down");
});

업데이트 된 바이올린

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-2

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사