반응형
부트 스트랩 : 하나가 확장되면 다른 섹션 축소
저는 Rails 앱을 만들고 있으며 Twitter의 Bootstrap 붕괴 와 관련된 특정 기능을 구현하려고합니다 . 내가 설명 할 때 참아주세요.
현재 다음과 같은 견해가 있습니다.
이러한 각 버튼을 클릭하면 데이터 토글 div가 확장됩니다. 보기는 다음과 같이 설정됩니다.
<button class="btn dropdown" data-toggle="collapse" data-target="#keys"><i class="icon-chevron-right"></i> Keys <span class="badge badge-info pull-right"><%= @app.keys.count %></span></button>
<button class="btn dropdown" data-toggle="collapse" data-target="#attrs"><i class="icon-chevron-right"></i> Attributes</button>
<button class="btn dropdown" data-toggle="collapse" data-target="#edit"><i class="icon-chevron-right"></i> Edit Details</button>
<div class="collapse indent" id="keys">
<!--content-->
</div>
<div class="collapse indent" id="attrs">
<!--content-->
</div>
<div class="collapse" id="edit">
<!--content-->
</div>
버튼을 나란히 놓고 싶기 때문에 이렇게 설정했습니다. 버튼을 뷰 바로 위로 이동하면 확장 / 축소되고 버튼이 서로 겹쳐집니다.
그래서 저의 최종 목표는 세 개의 버튼을 나란히 놓고 각각의 섹션을 축소 및 확장하는 것입니다. 현재 설정은 작동하지만 약간 어색합니다. 예를 들어, 누군가 키 섹션을 확장 한 다음 속성 섹션을 확장하면 키 섹션 아래로 스크롤해야합니다.
이 문제에 대한 두 가지 가능한 해결책이 있습니다. 하나는 하나의 버튼을 누르면 다른 2 개가 저절로 축소된다는 것입니다. 이는 주어진 시간에 이러한 섹션 중 하나만 확장됨을 의미합니다.
더 나은 해결책은 키가 확장되면 오른쪽에있는 버튼이 키 div의 하단으로 이동하고 속성이 확장되면 세부 정보 수정 버튼이 해당 div의 하단으로 이동하도록하는 것입니다. . 이것이 가능한가? 나는 이미 버튼을 서로 쌓아 놓고 CSS를 통해 상대 위치를 변경하여 시도했지만 섹션 중 하나가 확장되면 다른 버튼이 어색한 위치에 있었기 때문에 작동하지 않았습니다. 확장 된 섹션의 중간.
마지막으로 트위터의 부트 스트랩 페이지에 언급 된 아코디언 스타일 동작없이이 작업을 수행하고 싶지만 누군가 디자인 관점에서 이것이 더 낫다고 설득 할 수 있다면 확실히 재고 할 것입니다.
를 사용하는 data-parent첫 번째 솔루션은 예제 선택기 아키텍처를 고수하는 것입니다.
<div id="myGroup">
<button class="btn dropdown" data-toggle="collapse" data-target="#keys" data-parent="#myGroup"><i class="icon-chevron-right"></i> Keys <span class="badge badge-info pull-right">X</span></button>
<button class="btn dropdown" data-toggle="collapse" data-target="#attrs" data-parent="#myGroup"><i class="icon-chevron-right"></i> Attributes</button>
<button class="btn dropdown" data-toggle="collapse" data-target="#edit" data-parent="#myGroup"><i class="icon-chevron-right"></i> Edit Details</button>
<div class="accordion-group">
<div class="collapse indent" id="keys">
keys
</div>
<div class="collapse indent" id="attrs">
attrs
</div>
<div class="collapse" id="edit">
edit
</div>
</div>
</div>
두 번째 해결책은 이벤트에 바인딩하고 다른 접을 수있는 요소를 직접 숨기는 것입니다.
var $myGroup = $('#myGroup');
$myGroup.on('show.bs.collapse','.collapse', function() {
$myGroup.find('.collapse.in').collapse('hide');
});
추신 : 데모의 이상한 효과 min-height는 예제 의 세트로 인해 발생 합니다. 무시하십시오.
편집 :에서 JS 이벤트를 변경 show하는 show.bs.collapse에 지정된 부트 스트랩 문서 .
마크 업을 변경하지 않으려면이 함수가 트릭을 수행합니다.
jQuery('button').click( function(e) {
jQuery('.collapse').collapse('hide');
});
BUTTON을 클릭 할 때마다 모든 섹션이 축소됩니다. 그런 다음 부트 스트랩은 선택한 항목을 엽니 다.
Bootstrap 4를 사용 중이고 마크 업을 변경하지 않으려는 경우 :
var $myGroup = $('#myGroup');
$myGroup.on('show.bs.collapse','.collapse', function() {
$myGroup.find('.collapse.show').collapse('hide');
});
콘텐츠 아래에 나란히있는 버튼이있는 부트 스트랩 3 예제
.panel-heading {
display: inline-block;
}
.panel-group .panel+.panel {
margin: 0;
border: 0;
}
.panel {
border: 0 !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
background-color: transparent !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div>
</div>
</div>
<div class="panel panel-default">
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div>
</div>
</div>
<div class="panel panel-default">
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div>
</div>
</div>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
</h4>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
</h4>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collaple Group 3</a>
</h4>
</div>콘텐츠 위에 나란히있는 버튼이있는 부트 스트랩 3 예제
.panel-heading {
display: inline-block;
}
.panel-group .panel+.panel {
margin: 0;
border: 0;
}
.panel {
border: 0 !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
background-color: transparent !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
</h4>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
</h4>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collaple Group 3</a>
</h4>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div>
</div>
</div>
<div class="panel panel-default">
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div>
</div>
</div>
<div class="panel panel-default">
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div>
</div>
</div>
</div>부트 스트랩 규칙에 따라 HTML 구조와 적절한 선택기를 고수한다면 괜찮을 것입니다.
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div>
</div>
</div>
</div>
대한 부트 스트랩 버전 4.1
대신 요소에 data-parent속성을 추가하십시오 .collapsebutton
<div id="myGroup">
<button class="btn dropdown" data-toggle="collapse" data-target="#keys"><i class="icon-chevron-right"></i> Keys <span class="badge badge-info pull-right">X</span></button>
<button class="btn dropdown" data-toggle="collapse" data-target="#attrs"><i class="icon-chevron-right"></i> Attributes</button>
<button class="btn dropdown" data-toggle="collapse" data-target="#edit"><i class="icon-chevron-right"></i> Edit Details</button>
<div class="accordion-group">
<div class="collapse indent" id="keys" data-parent="#myGroup">
keys
</div>
<div class="collapse indent" id="attrs" data-parent="#myGroup">
attrs
</div>
<div class="collapse" id="edit" data-parent="#myGroup">
edit
</div>
</div>
이것을 사용하십시오 :
$('.panel-defaul.ph').on('show.bs.collapse', function () {
$(this).children('.panel-heading').addClass('panel-heading-collapsed');
$('.panel-defaul.ph').not(this).children('.panel-collapse').removeClass('in');
});
부트 스트랩 4에서 모든 축소 항목을 닫는 작업은 다음과 같습니다.
동작:
<button id="CloseAll" class="btn btn-primary" type="button" data-toggle="collapse">Close All</button>
JQUERY :
$(document).ready(function() {
$("#CloseAll").on('click', function() {
$(".collapse").removeClass("show");
});
});
여기서 부트 스트랩 4> 4.1.1의 매력처럼 작동합니다.
var myGroup = $('your-list');
myGroup.on('show.bs.collapse','.collapse', function() {
myGroup.find('.collapse.show').collapse('hide');
});
이 방법은 나에게 적절하게 작동합니다.
var lanopt = $(".language-option");
lanopt.on("show.bs.collapse",".collapse", function(){
lanopt.find(".collapse.in").collapse("hide");
});
이것은 나에게 도움이되었습니다.
jQuery('button').click( function(e) {
jQuery('.in').collapse('hide');
});
이미 열린 섹션이 접혀 있습니다. GrafiCode Studio에 Thnks
참고 URL : https://stackoverflow.com/questions/11476670/bootstrap-collapse-other-sections-when-one-is-expanded
반응형
'programing tip' 카테고리의 다른 글
| C에서 대소 문자를 구분하지 않는 문자열 comp (0) | 2020.11.28 |
|---|---|
| float를 사용하지 않고 div를 왼쪽 / 오른쪽으로 정렬하는 방법은 무엇입니까? (0) | 2020.11.27 |
| Ctrl + R은 SSMS에서 쿼리 결과 창을 숨기지 않습니다. (0) | 2020.11.27 |
| 주입 및 리소스 및 자동 연결 주석 (0) | 2020.11.27 |
| 이미지 UriSource 및 데이터 바인딩 (0) | 2020.11.27 |