Bootstrap Glyphicon을 사용하여 축소 가능한 패널 상태를 동적으로 표시하려면 어떻게 해야 합니까?

Bootstrap Glyphicon을 사용하여 축소 상태 표시

Collapse에 대한 Bootstrap 3 문서에서는 CSS를 사용하여 갈매기형 아이콘을 표시하는 예를 제공합니다. 접이식 패널의 상태. 그러나 이 솔루션은 모든 브라우저에서 완벽하게 작동하지 않을 수 있습니다.

더 우아한 솔루션

더 우아한 솔루션을 만들기 위해 Bootstrap 3 데이터를 사용할 수 있습니다. 축소 상태에 따라 Glyphicon 클래스를 동적으로 업데이트하는 토글 속성:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>

<div class="panel-group">

$('.accordion-toggle').on('click', function (e) {
    var chevron = $(e.target).children('i.glyphicon');
    chevron.toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});

이 솔루션은 다음을 사용합니다. 축소가 트리거될 때 Chevron 클래스를 전환하는 jQuery입니다. 패널이 열리면 glyphicon-chevron-down 클래스가 추가되고 패널이 축소되면 glyphicon-chevron-up 클래스가 추가됩니다. 이는 축소 상태에 대한 동적이고 반응적인 표시를 제공합니다.

위 내용은 Bootstrap Glyphicon을 사용하여 축소 가능한 패널 상태를 동적으로 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!