การเพิ่มไอคอนเปิด / ปิดไปยัง Twitter Bootstrap ที่ยุบได้ (หีบเพลง)

87

ฉันได้ตั้งค่าหีบเพลง Bootstrap เวอร์ชันง่ายๆนี้แล้ว :

หีบเพลงธรรมดา: http://jsfiddle.net/darrenc/cngPS/

ขณะนี้ไอคอนชี้ลงเท่านั้น แต่มีใครรู้บ้างว่าจำเป็นต้องใช้ JS อะไรเพื่อเปลี่ยนคลาสของไอคอนเป็น:

<i class="icon-chevron-up"></i>

... เพื่อให้ชี้ขึ้นเมื่อขยายและสลับกลับลงอีกครั้งเมื่อยุบและอันดับสี่?

javascript  jquery  twitter-bootstrap 
— คาร์เรน
แหล่งที่มา

คำตอบ:

94

นี่คือคำตอบสำหรับผู้ที่กำลังมองหาวิธีแก้ปัญหาใน Bootstrap 3 (เช่นตัวฉันเอง)

ส่วน HTML:

<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>

ส่วน js:

$('.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");
});

ตัวอย่างหีบเพลง:

ตัวอย่างหีบเพลง Bootply

— Andrei Veve
แหล่งที่มา
6
สิ่งที่จำเป็นสำหรับ bootstrap 3.x. ถ้าใช้ 2.x .bs.collapseลบ ฉันเปลี่ยนด้วยshown and hidden to show and hideเช่นกันดังนั้นภาพเคลื่อนไหวจึงเกิดขึ้นก่อนที่หีบเพลงจะเปิดขึ้น
— user1881482
2
นี่น่าจะเป็นคำตอบที่ถูกต้องเพราะมันทำงานในเวอร์ชัน 4 ด้วย
— Andres Felipe
แล้วหีบเพลงที่ซ้อนกันล่ะ? องค์ประกอบลูกไม่มีบั้ง แต่ฉันยังคงเปิดสวิตช์พาเรนต์อยู่
— ลึกลับ
48

นี่คือแนวทางของฉันสำหรับ Bootstrap 2.x. มันเป็นแค่ css บางส่วน ไม่จำเป็นต้องใช้ JavaScript:

    .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 ดังนี้:

<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>
— มาร์ตินวิคแมน
แหล่งที่มา
2
ฉันชอบวิธีนี้มากมาร์ติน เป็นพิเศษเพราะไม่สร้างความรำคาญมาก
— J Castillo
4
ฉันพบว่าสิ่งนี้ใช้ได้กับข้อยกเว้นหนึ่ง - คาเร็ตเริ่มต้นจะแสดงการขยายสำหรับทุกส่วนเสมอ เมื่อคุณขยายแล้วยุบอีกครั้งก็ถูกต้อง
— Robb Sadler
8
@Robb - ฉันรวมคลาส "ยุบ" ไว้ในองค์ประกอบ "ยุบ" ของฉันใน html เพื่อแก้ไขปัญหาด้วยลูกศรเริ่มต้น html ของฉันแตกต่างกันเล็กน้อย แต่มันน่าจะใช้ได้
— Mark B
1
ฉันชอบโซลูชัน css เช่นกัน เพื่อนของฉันบางคนสบายใจใน css มากกว่า javascript ดังนั้นนี่จึงเป็นทางออกที่ดีกว่าสำหรับทีมของฉัน ขอขอบคุณสำหรับการระบุส่วนเริ่มต้น ตอนนี้ใช้งานได้ดีมาก!
— Hcabnettek
42

Bootstrap Collapse มีเหตุการณ์บางอย่างที่คุณสามารถตอบสนองได้:

$(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");
    });
});
— ฟิลิปป์ฮอฟมันน์
แหล่งที่มา
1
Muffls คุณเป็นดารา! ดีและเรียบง่ายเช่นกันขอบคุณที่ ;-)
— Darren
1
ยินดีต้อนรับ! คุณยังสามารถใช้แสดงหรือซ่อนแทนการแสดงและซ่อน ลองใช้งาน คุณจะเห็นว่าคุณชอบอันไหน
— Philipp Hofmann
1
สวัสดี Muffs มีความคิดว่าทำไมสิ่งนี้ถึงใช้ไม่ได้กับไซต์ทดสอบสดของฉัน datascrew.co.uk/gordonedge.com
— Darren
เพิ่ม $ (เอกสาร) พร้อม (... ในคุณ main.js ฉันใส่รหัสไว้ข้างบนแล้ว
— Philipp Hofmann
8
Bootstrap3: ชื่อเหตุการณ์ต้องมี. b.collapse ดังนั้นจึงอยู่บน ('hide.bs.collapse') และบน ('show.bs.collapse') หรือแสดง / ซ่อนเมื่อคุณต้องการเพิ่มการเปลี่ยน css เพิ่มเติมใน มัน.
— Langeleppel
21

ใช้ตัวเลือกหลอก CSSes: หลังจากใช้ Glyphicons ในตัวของ Bootstrap 3 สำหรับคำตอบที่ไม่มี JSพร้อมการปรับเปลี่ยนเล็กน้อยใน HTML ของคุณ ...

CSS

.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);
}

HTML

เพิ่มclass="collapsed"ลงในแท็กจุดยึดที่ปิดตามค่าเริ่มต้น

สิ่งนี้จะทำให้จุดยึดเช่น

<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">

เป็น

<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">

CodePen ตัวอย่างสด

http://codepen.io/anon/pen/VYobER

ภาพหน้าจอ

สิ่งที่ปรากฏใน JSBin

— bafromca
แหล่งที่มา
1
ลิงค์ jsbin นี้ได้รับการรายงาน
— Nick Bartlett
2
ย้ายไปที่ CodePen ขอบคุณสำหรับการรายงาน ให้มันลอง!
— bafromca
16

เพิ่มในคำตอบของ @muffls เพื่อให้สิ่งนี้ใช้ได้กับการล่มสลายของ twitter bootstrap ทั้งหมดและทำการเปลี่ยนแปลงลูกศรก่อนที่ภาพเคลื่อนไหวจะเริ่มขึ้น

$('.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().

— จอห์นแมกโนเลีย
แหล่งที่มา
1
+1 ทิ้งไว้ใน & มันใช้ได้สำหรับฉัน - เพิ่งแก้ไขให้ใช้ icon-chevron-right แทนซ้าย
— azcoastal
1
อันนี้ใช้ได้กับฉัน รหัสอื่น ๆ เปลี่ยนคลาสสำหรับแท็บทั้งหมดเมื่อคลิกแทนที่จะเป็นแท็บที่คลิก :)
— ขอบภาพ
10

ฉันคิดว่ารหัสที่ดีที่สุดคือ:

  $('#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");
      });
— ผู้ใช้ 2273425
แหล่งที่มา
2
นี่เป็นทางออกเดียวที่ใช้ได้ผลสำหรับฉันสลับคลาสของกลุ่มหีบเพลงทั้งหมด ไชโย :)
— maximus ツ
6

หากใครสนใจนี่คือวิธีที่คุณทำกับ 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');
});

คุณเพียงแค่เปลี่ยนชื่อคลาสในตัวอย่างเป็นชื่อที่คุณใช้ในกรณีของคุณ

— noppe
แหล่งที่มา
1
ขอบคุณ b3rgstrom ชื่นชม ฉันจะตรวจสอบว่าเมื่อฉันใช้ BS3 ครั้งต่อไป
— Darren
1
ไม่มีการพิสูจน์คิดว่าอาจมีคนพบคำถามของคุณในอนาคตด้วยปัญหาเดียวกัน :)
— noppe
5

โซลูชัน CSS อย่างเดียวที่อ่านได้มากที่สุดน่าจะเป็นการใช้แอตทริบิวต์ aria-expand โปรดจำไว้ว่าคุณจะต้องเพิ่ม aria-expand = "false" ให้กับองค์ประกอบการยุบทั้งหมดเนื่องจากไม่ได้ตั้งค่าเมื่อโหลด (เฉพาะในคลิกแรกเท่านั้น)

HTML:

<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>

CSS:

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;
}

ทำงานร่วมกับ Bootstrap 3.x.

— Andreas Bergström
แหล่งที่มา
1
นี้ทำงานได้อย่างสมบูรณ์ เนื่องจากแท็กจุดยึดของฉันคือการสลับข้อมูลฉันจึงเปลี่ยน h2 เป็น a ใน CSS
— MC9000
3

นี่คือวิธีแก้ปัญหาของฉันซึ่งได้รับการปรับปรุงเพิ่มเติมจากบทความที่โพสต์โดย @ john-magnolia และแก้ไขปัญหาบางอย่าง

/**
 * 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>
— มิกโกะโอตะมะอะ
แหล่งที่มา
1
คนดี - ฉันรู้สึกงี่เง่ามาก แต่ไม่สามารถใช้วิธีแก้ปัญหาเหล่านี้ได้อย่างใดอย่างหนึ่ง: - ข้อแตกต่างเดียวที่ฉันคิดได้คือฉันใช้ bootstrap3 ใหม่และด้วยเหตุนี้จึงได้รับคลาส "glyphicon glyphicon-chevron-right ๆ พอยน์เตอร์?
— benteh
2
Bootstrap 3 ไม่ใช่รุ่นที่เข้ากันได้แบบย้อนหลัง โปรดดูเอกสาร Bootstrap 3 เกี่ยวกับวิธีการย้ายรหัส
— Mikko Ohtamaa
1
สวัสดี Mikko ขอบคุณใช่ฉันรวบรวมสิ่งนั้นและได้รับความช่วยเหลือที่ดีที่นี่: stackoverflow.com/questions/18147338/…
— benteh
3

โซลูชัน bootstrap 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');
});
— Geert
แหล่งที่มา
คำตอบที่ยอดเยี่ยม
— Naveen DA
3

นี่คือวิธีที่ฉันทำโดยไม่มี js

ฉันใช้ไอคอน glyphicon-triangle-right แต่ใช้ได้กับไอคอนอื่น ๆ สิ่งที่ทำคือใช้การหมุน 90 องศากับไอคอนเมื่อแผงเปิดอยู่หรือไม่ ฉันใช้Bootstrap 3.3.5สำหรับอันนี้

รหัส CSS

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 ที่นำมาจากตัวอย่าง Bootstrap

<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>
— ไฟฟ้าทั่วไป
แหล่งที่มา
วิธีนี้ใช้ได้กับฉัน แต่สถานะเริ่มต้นจะถูกหมุนโดย 90deg คุณช่วยแนะนำวิธีทำให้สถานะเริ่มต้นไม่ถูกหมุน (0deg) ได้หรือไม่? ขอบคุณ!
— Tsung-Ting Kuo
1
ในองค์ประกอบจุดยึดให้เพิ่ม class = "ยุบ" เพื่อหลีกเลี่ยงสิ่งที่เกิดขึ้นกับคุณ
— General Electric
ขอบคุณสำหรับการตอบกลับ! ฉันได้ลอง '<h4 class = "panel-title Collage"> จริงๆ แต่ไม่มีโชค จะถูกต้องหรือไม่?
— Tsung-Ting Kuo
1
ต้องอยู่บนแท็กจุดยึดเนื่องจากสิ่งที่ bootstrap js เปลี่ยนแปลงเมื่อเหตุการณ์ onClick เริ่มทำงานตรวจสอบในหน้านี้กำลังทำงานกับโซลูชันที่ฉันกล่าวถึงacubavoy.com/preguntas-frequentes
— General Electric
2

ข้างต้นไม่ได้ผลสำหรับฉัน แต่ฉันคิดขึ้นมาและได้ผล:

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>
      ...
— โจชัวเบนสัน
แหล่งที่มา
1

@RobSadler:

CSS ของ RE Martin Wickman เท่านั้น ...

คุณสามารถแก้ไขปัญหานั้นได้โดยการใส่หีบเพลงคาเร็ตบนแท็กจุดยึดและให้คลาสที่ยุบเป็นค่าเริ่มต้น ชอบมาก:

<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>

ที่ได้ผลสำหรับฉัน

— RioBrewster
แหล่งที่มา
1

สำหรับ Bootstrup 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');

สร้างขึ้นโดยอัตโนมัติ (class = "ยุบ") เมื่อคุณกดเมนูซ่อน

ps เมื่อคุณต้องการสร้างเมนูต้นไม้

— โปปอฟอันเดรย์
แหล่งที่มา
1

สิ่งนี้ได้รับคำตอบจากหลายวิธี แต่สิ่งที่ฉันคิดขึ้นมานั้นง่ายและง่ายที่สุดสำหรับฉันด้วย Bootstrap 3 และฟอนต์ที่ยอดเยี่ยม ฉันเพิ่งทำ

$('a.toggler').on('click', function () {$('i', this).toggleClass('fa-caret-up');});

นี่เป็นการสลับคลาส CSS ของไอคอนที่ฉันต้องการแสดง ฉันเพิ่มตัวสลับคลาสในรายการที่ฉันต้องการใช้สิ่งนี้ สามารถเพิ่มลงในรายการใดก็ได้ที่คุณต้องการสลับไอคอน

— Micah Montoya
แหล่งที่มา
0

โซลูชันอื่นที่ไม่มีจาวาสคริปต์ที่ใช้ฟังก์ชันการยุบตัวเอง:

/* 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>
— เซบาสเตียน Sangervasi
แหล่งที่มา
0

สำหรับโซลูชัน CSS เท่านั้น (และไม่มีไอคอน) โดยใช้ Bootstrap 3 ฉันต้องเล่นซอเล็กน้อยตามคำตอบของ Martin Wickman ด้านบน

ฉันไม่ได้ใช้สัญกรณ์หีบเพลง - * เพราะทำด้วยแผงใน BS3

นอกจากนี้ฉันต้องรวมไว้ใน HTML aria-expand = "true" เริ่มต้นในรายการที่เปิดเมื่อโหลดหน้า

นี่คือ 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>
— JessycaFrederick
แหล่งที่มา
0

คำตอบที่สั้นที่สุด

HTML

<a data-toggle="collapse" data-parent="#panel-quote-group" href="#collapseQuote">
    <span class="toggle-icon glyphicon glyphicon-collapse-up"></span>
</a>

JS:

<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ว่าไอคอนของคุณอยู่นอกองค์ประกอบที่คุณคลิกหรือไม่

— Junaid
แหล่งที่มา
0

นี่คือวิธีแก้ปัญหาที่สร้างส่วนที่ขยายได้โดยใช้การออกแบบวัสดุบางส่วน bootstrap 4.5 / 5 alpha และไม่ใช่ javascript ทั้งหมด

สไตล์สำหรับส่วนหัว

<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>
— วิลเลียมวอร์ลีย์
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.