मैंने बूटस्ट्रैप समझौते का यह सरल संस्करण स्थापित किया है :
सरल समझौते: http://jsfiddle.net/darrenc/cngPS/
वर्तमान में आइकन केवल अंक नीचे , लेकिन किसी को पता है कि क्या जे एस इसलिए लागू किया जाना के रूप में करने के लिए आइकन के वर्ग बदलने के लिए की जरूरत होगी करता है:
<i class="icon-chevron-up"></i>
... इतना है कि यह इंगित करता है जब विस्तारित होता है और ढह जाने पर फिर से नीचे गिर जाता है, और इतना चौथा?
जवाबों:
यहां यह उन लोगों के लिए जवाब है जो बूटस्ट्रैप 3 (खुद की तरह) में एक समाधान की तलाश कर रहे हैं।
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
<span class="glyphicon glyphicon-minus"></span>
</button>
</div>
<div id="demo" class="collapse in">Some dummy text in here.</div>
$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
यहाँ बूटस्ट्रैप 2.x के लिए मेरा दृष्टिकोण है। यह सिर्फ कुछ सीएसएस है। कोई जावास्क्रिप्ट की जरूरत:
.accordion-caret .accordion-toggle:hover {
text-decoration: none;
}
.accordion-caret .accordion-toggle:hover span,
.accordion-caret .accordion-toggle:hover strong {
text-decoration: underline;
}
.accordion-caret .accordion-toggle:before {
font-size: 25px;
vertical-align: -3px;
}
.accordion-caret .accordion-toggle:not(.collapsed):before {
content: "▾";
margin-right: 0px;
}
.accordion-caret .accordion-toggle.collapsed:before {
content: "▸";
margin-right: 0px;
}
बस इस तरह, समूह-समूह div में वर्ग accordion-caret जोड़ें :
<div class="accordion-group accordion-caret">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
<strong>Header</strong>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Content
</div>
</div>
</div>
बूटस्ट्रैप संक्षिप्त में कुछ घटनाएँ हैं, जिन पर आप प्रतिक्रिया कर सकते हैं:
$(document).ready(function(){
$('#accordProfile').on('shown', function () {
$(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up");
});
$('#accordProfile').on('hidden', function () {
$(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down");
});
});
CSSes के छद्म चयनकर्ता का उपयोग करें: बूटस्ट्रैप 3 के एकीकृत ग्लिफ़ीकॉन का उपयोग करने के बाद आपके HTML में मामूली संशोधन के साथ कोई जेएस उत्तर नहीं ...
सीएसएस
.panel-heading [data-toggle="collapse"]:after
{
font-family: 'Glyphicons Halflings';
content: "\e072"; /* "play" icon */
float: right;
color: #b0c5d8;
font-size: 18px;
line-height: 22px;
/* rotate "play" icon from > (right arrow) to down arrow */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.panel-heading [data-toggle="collapse"].collapsed:after
{
/* rotate "play" icon from > (right arrow) to ^ (up arrow) */
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
एचटीएमएल
class="collapsed"डिफ़ॉल्ट रूप से बंद किए गए किसी भी एंकर टैग में जोड़ें ।
इससे एंकर जैसे बदल जाएंगे
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
में
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
कोडपेन लाइव उदाहरण
http://codepen.io/anon/pen/VYobER
स्क्रीनशॉट
@Muffls उत्तर में जोड़ा गया ताकि यह सभी ट्विटर बूटस्ट्रैप के ढहने के साथ काम करे और एनिमेटेशन शुरू होने से पहले तीर में बदलाव कर दे।
$('.collapse').on('show', function(){
$(this).parent().find(".icon-chevron-left").removeClass("icon-chevron-left").addClass("icon-chevron-down");
}).on('hide', function(){
$(this).parent().find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-left");
});
आपके HTML संरचना के आधार पर आपको संशोधित करने की आवश्यकता हो सकती है parent()।
मुझे लगता है कि सबसे अच्छे कोड ये हैं:
$('#accordion1').collapse({
toggle: false
}).on('show',function (e) {
$(e.target).parent().find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up");
}).on('hide', function (e) {
$(e.target).parent().find(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down");
});
अगर किसी को यह दिलचस्पी है कि आप बीएस 3 के साथ ऐसा कैसे करें क्योंकि उन्होंने इवेंट के नाम बदल दिए हैं:
$('.collapse').on('show.bs.collapse', function(){
var i = $(this).parent().find('i')
i.toggleClass('fa-caret-right fa-caret-down');
}).on('hide.bs.collapse', function(){
var i = $(this).parent().find('i')
i.toggleClass('fa-caret-down fa-caret-right');
});
आप उदाहरण के लिए वर्ग के नाम को उन उदाहरणों में बदलते हैं जिन्हें आप अपने मामले में उपयोग करते हैं।
सबसे पठनीय CSS-only समाधान शायद aria- विस्तारित विशेषता का उपयोग करने के लिए होगा। याद रखें कि आपको सभी पतन-तत्वों में aria- विस्तारित = "गलत" जोड़ना होगा क्योंकि यह लोड पर सेट नहीं है (केवल पहले क्लिक पर)।
<h2 data-toggle="collapse" href="#collapseId" aria-expanded="false">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="glyphicon glyphicon-chevron-down"></span> Title
</h2>
h2[aria-expanded="false"] span.glyphicon-chevron-down,
h2[aria-expanded="true"] span.glyphicon-chevron-right
{
display: none;
}
h2[aria-expanded="true"] span.glyphicon-chevron-down,
h2[aria-expanded="false"] span.glyphicon-chevron-right
{
display: inline;
}
बूटस्ट्रैप 3.x के साथ काम करता है।
यहाँ मेरा समाधान है जो @ जॉन-मैगनोलिया द्वारा पोस्ट किए गए एक से और परिष्कृत है और इसके कुछ मुद्दों को हल करता है
/**
* Toggle on/off arrow for Twitter Bootstrap collapsibles.
*
* Multi-collapsible-friendly; supports several collapsibles in the same group, on the same page.
*/
function animateCollapsibles() {
$('.collapse').on('show', function() {
var $t = $(this);
var header = $("a[href='#" + $t.attr("id") + "']");
header.find(".icon-chevron-right").removeClass("icon-chevron-right").addClass("icon-chevron-down");
}).on('hide', function(){
var $t = $(this);
var header = $("a[href='#" + $t.attr("id") + "']");
header.find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-right");
});
}
और यहाँ उदाहरण मार्कअप है:
<div class="accordion" id="accordion-send">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-send" href="#collapse-refund">
<i class="icon icon-chevron-right"></i> Send notice
</a>
</div>
<div id="collapse-refund" class="accordion-body collapse">
<div class="accordion-inner">
<p>Lorem ipsum Toholampi city</p>
</div>
</div>
</div>
</div>
बूटस्ट्रैप v3 समाधान (जहां घटनाओं के अलग-अलग नाम हैं), केवल एक jQuery चयनकर्ता का उपयोग करके (जैसा कि यहां देखा गया है ):
$('.accordion').on('hide.bs.collapse show.bs.collapse', function (n) {
$(n.target).siblings('.panel-heading').find('i.glyphicon').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});
ऐसा मैं बिना किसी js के करता हूं।
मैंने आइकन ग्लिफ़िकॉन-ट्राइएंगल-राइट का उपयोग किया, लेकिन यह किसी भी अन्य आइकन के साथ काम करता है, यह क्या करता है कि यह पैनल के खुले होने या न होने पर आइकन के लिए 90 डिग्री रोटेशन लागू करता है। मैं इस एक के लिए बूटस्ट्रैप 3.3.5 का उपयोग कर रहा हूं ।
सीएसएस कोड
h4.panel-title a {
display: block;
}
h4.panel-title a.collapsed .glyphicon-triangle-right {
color: #ada9a9 !important;
transform: rotate(0deg);
}
h4.panel-title a .glyphicon-triangle-right {
color: #515e64 !important;
transform: rotate(90deg);
}
यह बूटस्ट्रैप उदाहरण से ली गई HTML संरचना है
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Proven Expertise
<span class="glyphicon glyphicon-triangle-right pull-right" aria-hidden="true"></span>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
उपरोक्त में से किसी ने भी मेरे लिए काम नहीं किया लेकिन मैं इसके साथ आया और यह काम किया:
function toggleChevron(el) {
if ($(el).find('i').hasClass('icon-chevron-left'))
$(el).find('.icon-chevron-left').removeClass("icon-chevron-left").addClass("icon-chevron-down");
else
$(el).find('.icon-chevron-down').removeClass("icon-chevron-down").addClass("icon-chevron-left");
}
HTML कार्यान्वयन:
<div class="accordion" id="accordion-send">
<div class="accordion-group">
<div class="accordion-heading" onClick="toggleChevron(this)">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-send" href="#collapse-refund">
<i class="icon icon-chevron-right"></i> Send notice
</a>
...
@RobSadler:
आरई मार्टिन विकमैन का सीएसएस केवल संस्करण ...
आप एंकर टैग पर अकॉउंटेशन-केयरट डालकर और डिफ़ॉल्ट रूप से उसे ध्वस्त वर्ग देकर उस समस्या को हल कर सकते हैं। इस तरह:
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle accordion-caret collapsed" data-toggle="collapse" href="#collapseOne">
<strong>Header</strong>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Content
</div>
</div>
मेरे लिए वह काम कर गया।
बूटस्ट्रैप 3.2 के लिए + FontAwesome
$(document).ready(function(){
$('#accordProfile').on('shown.bs.collapse', function () {
$(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-up");
});
$('#accordProfile').on('hidden.bs.collapse', function () {
$(".fa-chevron-up").removeClass("fa-chevron-up").addClass("fa-chevron-down");
});
});
कभी-कभी आपको ऐसा लिखना पड़ता है। यदि ऐसा है तो
$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');
स्वचालित रूप से उत्पन्न (वर्ग = "ढह गया"), जब आप छिपा मेनू दबाते हैं।
पी एस जब आप एक पेड़ मेनू बनाने की जरूरत है
इसका उत्तर कई तरीकों से दिया गया है लेकिन जो मैं लेकर आया था वह बूटस्ट्रैप 3 और फॉन्ट भयानक के साथ मेरे लिए सबसे सरल और आसान था। मैंने अभी किया
$('a.toggler').on('click', function () {$('i', this).toggleClass('fa-caret-up');});
यह सिर्फ उस आइकन के CSS वर्ग को टॉगल करता है जिसे मैं दिखाना चाहता हूं। मैं उस आइटम पर क्लास टॉगलर जोड़ देता हूं जिसे मैं इसे लागू करना चाहता हूं। यह किसी भी आइटम पर जोड़ा जा सकता है जिसे आप एक आइकन टॉगल करना चाहते हैं।
पतन कार्यक्षमता का उपयोग करने वाला एक और नो-जावास्क्रिप्ट समाधान:
/* Prevent block display and transition animation */
.expand-icon.collapse.in,
.collapse-icon.collapse.in {
display: inline; }
.expand-icon.collapsing {
display: none; }
/* HTML Toggler with glyphicons */
<a data-toggle="collapse" href=".my-collapse">
<span class="my-collapse collapse-icon collapse in">
<span class="glyphicon glyphicon-collapse-up"></span>
</span>
<span class="my-collapse expand-icon collapse">
<span class="glyphicon glyphicon-expand"></span>
</span>
</a>
बूटस्ट्रैप 3 का उपयोग करके सीएसएस-ओनली (और आइकन-फ्री) समाधान के लिए मुझे मार्टिन विकमैन के उत्तर के आधार पर थोड़ा सा फ़िडलिंग करना था।
मैंने समझौते का उपयोग नहीं किया- * अंकन क्योंकि यह बीएस 3 में पैनलों के साथ किया गया है।
इसके अलावा, मुझे उस पृष्ठ पर आरंभिक HTML aria- विस्तारित = "सत्य" में शामिल करना था जो पृष्ठ लोड पर खुला है।
यहाँ CSS का उपयोग किया गया है।
.accordion-toggle:hover { text-decoration: none; }
.accordion-toggle:hover span, .accordion-toggle:hover strong { text-decoration: underline; }
.accordion-toggle:before { font-size: 25px; }
.accordion-toggle[data-toggle="collapse"]:before { content: "+"; margin-right: 0px; }
.accordion-toggle[aria-expanded="true"]:before { content: "-"; margin-right: 0px; }
यहाँ मेरा अभिन्न HTML है:
<div id="acc1">
<div class="panel panel-default">
<div class="panel-heading">
<span class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" aria-expanded="true" data-parent="#acc1" href="#acc1-1">Title 1
</a>
</span>
</div>
<div id=“acc1-1” class="panel-collapse collapse in">
<div class="panel-body">
Text 1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<span class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#acc1” href=“#acc1-2”>Title 2
</a>
</span>
</div>
<div id=“acc1-2” class="panel-collapse collapse">
<div class="panel-body">
Text 2
</div>
</div>
</div>
</div>
सबसे कम संभव उत्तर।
एचटीएमएल
<a data-toggle="collapse" data-parent="#panel-quote-group" href="#collapseQuote">
<span class="toggle-icon glyphicon glyphicon-collapse-up"></span>
</a>
जे एस:
<script type="text/javascript">
$(function () {
$('a[data-toggle="collapse"]').click(function () {
$(this).find('span.toggle-icon').toggleClass('glyphicon-collapse-up glyphicon-collapse-down');
})
})
</script>
और हां, आप एंकर टैग के बजाय एक चयनकर्ता के लिए कुछ aभी उपयोग कर सकते हैं और thisयदि आपका आइकन आपके क्लिक किए गए तत्व के बाहर स्थित है , तो आप इसके बजाय विशिष्ट चयनकर्ता का उपयोग कर सकते हैं ।
यहां एक समाधान है जो एक अनुभाग बनाता है जो कुछ सामग्री डिज़ाइन, बूटस्ट्रैप 4.5 / 5 अल्फा और पूरी तरह से गैर-जावास्क्रिप्ट का उपयोग करके विस्तार योग्य है।
हेड सेक्शन के लिए स्टाइल
<style>
[data-toggle="collapse"] .fa:before {
content: "\f077";
}
[data-toggle="collapse"].collapsed .fa:before {
content: "\f078";
}
</style>
बॉडी html
<div class="pt-3 pb-3" style="border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; cursor: pointer;">
<a href="#expandId" class="text-dark float-right collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="expandId">
<i class="fa" aria-hidden="false"></i>
</a>
<a href="#expandId" class="text-dark collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="expandId">Expand Header</a>
<div class="collapse" id="expandId">
CONTENT GOES IN HERE
</div>
.bs.collapse। मैंने भी बदल दिया है,shown and hidden to show and hideइसलिए ऐनिमेशन खुलने से पहले एनीमेशन होता है।