반응형
Twitter Bootstrap 버튼 클릭하여 버튼 위의 텍스트 섹션 확장 / 축소 전환
나는 최근에 부트 스트랩을 건너 왔고 영웅의 예를 확장하기 위해 노력하고 있습니다. 내 페이지에 다음 동작을 추가하고 싶습니다.
버튼 (예 : 선택기 '.row .btn'이있는 요소)을 클릭하면 버튼 위의 텍스트 부분 확장 / 축소간에 전환 할 수 있기를 원합니다.
HTML은 다음과 같습니다.
<html>
<head>
<title>Test Page</title>
<!-- Le styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-fixed-top">
</div>
<div class="container">
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>Blah, blah.</p>
<p><a class="btn btn-primary btn-large">Learn more »</a></p>
</div>
<!-- Example row of columns -->
<div class="row">
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
<script src="../assets/js/bootstrap-modal.js"></script>
<script src="../assets/js/bootstrap-dropdown.js"></script>
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
jQuery를 사용하여 이것을 해킹 할 수 있지만 부트 스트랩 방식으로 수행하는 방법이있을 수 있습니까? -즉 부트 스트랩 API를 사용합니까?
문서를 기반으로
<div class="row">
<div class="span4 collapse-group">
<h2>Heading</h2>
<p class="collapse">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
$('.row .btn').on('click', function(e) {
e.preventDefault();
var $this = $(this);
var $collapse = $this.closest('.collapse-group').find('.collapse');
$collapse.collapse('toggle');
});
작업 데모 .
링크의 data-collapse 및 data-target 속성을 사용하여 추가 JS 코드를 사용하지 않고도이를 수행 할 수 있습니다.
예 :
<a class="btn" data-toggle="collapse" data-target="#viewdetails">View details »</a>
다음은 작동하는 예 입니다.
Elaborating a bit more on Taylor Gautier's reply (sorry, I dont have enough reputation to add a comment), I'd reply to Dean Richardson on how to do what he wanted, without any additional JS code. Pure CSS.
You would replace his .btn with the following:
<a class="btn showdetails" data-toggle="collapse" data-target="#viewdetails"></a>
And add a small CSS for when the content is displayed:
.in.collapse+a.btn.showdetails:before {
content:'Hide details «';
}
.collapse+a.btn.showdetails:before {
content:'Show details »';
}
I wanted an "expand/collapse" container with a plus and minus button to open and close it. This uses the standard bootstrap event and has animation. This is BS3.
HTML:
<button id="button" type="button" class="btn btn-primary"
data-toggle="collapse" data-target="#demo">
<span class="glyphicon glyphicon-collapse-down"></span> Show
</button>
<div id="demo" class="collapse">
<ol class="list-group">
<li class="list-group-item">Warrior</li>
<li class="list-group-item">Adventurer</li>
<li class="list-group-item">Mage</li>
</ol>
</div>
JS:
$(function(){
$('#demo').on('hide.bs.collapse', function () {
$('#button').html('<span class="glyphicon glyphicon-collapse-down"></span> Show');
})
$('#demo').on('show.bs.collapse', function () {
$('#button').html('<span class="glyphicon glyphicon-collapse-up"></span> Hide');
})
})
Example:
http://plnkr.co/edit/aG5BtH?p=preview
html:
<h4 data-toggle-selector="#me">toggle</h4>
<div id="me">content here</div>
js:
$(function () {
$('[data-toggle-selector]').on('click',function () {
$($(this).data('toggle-selector')).toggle(300);
})
})
반응형
'Program Tip' 카테고리의 다른 글
| Rails : 데이터베이스에 요소가 없을 때 메시지를 표시하는 우아한 방법 (0) | 2020.11.12 |
|---|---|
| 더미 변수 생성 (0) | 2020.11.12 |
| .NET에서 숫자에 대한 "st", "nd", "rd"및 "th"엔딩을 쉽게 얻을 수있는 방법이 있습니까? (0) | 2020.11.12 |
| Mountain Lion에 Rmagick 설치 오류 (0) | 2020.11.12 |
| 줄로 분할 할 JS 정규식 (0) | 2020.11.12 |