আমি বুটস্ট্র্যাপ অ্যাকর্ডিয়ানের এই সাধারণ সংস্করণটি সেট আপ করেছি :
সাধারণ অ্যাকর্ডিয়ন: 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");
});
বুটস্ট্র্যাপ ২.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 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");
});
});
সিএসএস সিউডো-সিলেক্টর ব্যবহার করুন: আপনার এইচটিএমএলকে সামান্য পরিবর্তন করে কোনও জেএস উত্তরের জন্য বুটস্ট্র্যাপ 3 এর সমন্বিত গ্লাইফিকন ব্যবহার করার পরে ...
সিএসএস
.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
স্ক্রিনশট
@ মাফলস এর উত্তরে যুক্ত করা হয়েছে যাতে এটি সমস্ত টুইটার বুটস্ট্র্যাপ ধসের সাথে কাজ করে এবং অ্যানিমেটেশন শুরু হওয়ার আগে তীর পরিবর্তন করে।
$('.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");
});
আপনার এইচটিএমএল কাঠামোর উপর নির্ভর করে আপনার এটিকে সংশোধন করতে হবে 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");
});
যদি কেউ আগ্রহী হয় তবে তারা BS3 এর সাথে এটি কীভাবে করবেন কারণ তারা ইভেন্টের নাম পরিবর্তন করেছেন:
$('.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');
});
আপনি কেবল উদাহরণে শ্রেণীর নামগুলি আপনার ক্ষেত্রে ব্যবহার করেন এমনটিতে পরিবর্তন করুন।
সর্বাধিক পঠনযোগ্য সিএসএস-এর সমাধান হ'ল সম্ভবত এরিয়া-প্রসারিত বৈশিষ্ট্যটি ব্যবহার করা। মনে রাখবেন যে এরিয়া-প্রসারণ করা = সমস্ত ধসে-উপাদানগুলিতে "মিথ্যা" যুক্ত করতে হবে কারণ এটি লোডে সেট করা হয়নি (কেবলমাত্র প্রথম ক্লিকের জন্য)।
<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>
একটি বুটস্ট্র্যাপ ভি 3 সমাধান (যেখানে ইভেন্টগুলির বিভিন্ন নাম রয়েছে), কেবলমাত্র একটি জিকুয়েরি নির্বাচক ( এখানে দেখা হিসাবে ) ব্যবহার করে:
$('.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');
});
আমি কোনও জেএস ছাড়াই এটি করি।
আমি আইকনটি গ্লাইফিকন-ত্রিভুজ-ডান ব্যবহার করেছিলাম তবে এটি অন্য যে কোনও আইকনটির সাথে কাজ করে, এটি কী করে তা প্যানেলটি খোলা থাকে বা না থাকলে আইকনটিতে 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);
}
এটি বুটস্ট্র্যাপ উদাহরণ থেকে নেওয়া এইচটিএমএল কাঠামো
<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");
}
এইচটিএমএল বাস্তবায়ন:
<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>
...
@ রবস্যাডলার:
আরই মার্টিন উইকম্যানের সিএসএসের একমাত্র সংস্করণ ...
অ্যাঙ্কার-ক্যারেটটি অ্যাঙ্কর ট্যাগে রেখে এবং এটিকে ডিফল্টরূপে ধসে পড়া শ্রেণিতে দিয়ে আপনি এই সমস্যাটি পেতে পারেন। তাই ভালো:
<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>
এটা আমার জন্য কাজ করেছে।
বুটস্ট্রাপ ৩.২ + ফন্টআউবাইজের জন্য
$(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 ব্যবহার করে সিএসএস-কেবল (এবং আইকন মুক্ত) সমাধানের জন্য আমাকে উপরের মার্টিন উইকম্যানের উত্তরের উপর ভিত্তি করে কিছুটা ফিডল করতে হয়েছিল।
আমি অ্যাকর্ডিয়ন- * স্বরলিপি ব্যবহার করি নি কারণ এটি BS3 এর প্যানেলগুলির সাথে সম্পন্ন হয়েছে।
এছাড়াও, পৃষ্ঠার লোডে খোলা আইটেমটিতে আমাকে প্রাথমিক HTML এরিয়া-প্রসারিত = "সত্য" অন্তর্ভুক্ত করতে হয়েছিল।
আমি যে সিএসএস ব্যবহার করেছি তা এখানে।
.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; }
এখানে আমার স্যানিটাইজড এইচটিএমএল রয়েছে:
<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>
বডি এইচটিএমএল
<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যাতে অ্যাকডিয়েনটি খোলার আগে ঘটে যায়।