Bootstrap 3 ยุบแสดงสถานะพร้อมไอคอนเชฟรอน

126

การใช้ตัวอย่างหลักที่นำมาจากหน้าตัวอย่าง Bootstrap 3 Javascript สำหรับการยุบฉันสามารถแสดงสถานะการยุบโดยใช้ไอคอนรูปตัววี

ฉันใช้งานได้โดยใช้:

$('#accordion .accordion-toggle').click(function (e) {
    var chevState = $(e.target).siblings("i.indicator").toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
    $("i.indicator").not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});

วิธีนี้ใช้งานได้ (ไม่ได้ทดสอบอย่างสมบูรณ์ในทุกเบราว์เซอร์) แต่ฉันสงสัยว่ามีวิธีแก้ปัญหาที่หรูหรากว่านี้หรือไม่?

ตามหลักการแล้วฉันต้องการใช้ฟังก์ชันหลัก แต่ฉันไม่แน่ใจว่าจะได้ผลลัพธ์เดียวกันกับมันอย่างไร

$('#accordion').on('hidden.bs.collapse', function () {
    //do something...
})

ต่อไปนี้เป็นรุ่นที่ทำงานในjsfiddle

jquery  css  twitter-bootstrap  twitter-bootstrap-3 
— Ryan Scott
แหล่งที่มา
สวัสดีในตัวอย่างนี้ฉันจะทำให้ส่วนหัวทั้งหมดเป็นไฮเปอร์ลิงก์แทนที่จะเป็นเพียงข้อความได้อย่างไร กล่าวอีกนัยหนึ่งคือเมื่อฉันคลิกที่แผงส่วนหัวไม่ใช่แค่ข้อความฉันต้องการแสดงเพื่อสลับ ฉันจะทำอย่างไร
— user1447718
คล้ายกัน: stackoverflow.com/questions/19024218/…
— trante
@ user1447718 นี่คือซอที่ทำอย่างนั้น: JSFiddleฉันต้องการให้ส่วนหัวทั้งหมดคลิกได้ด้วยดังนั้นฉันจึงรวมโซลูชันบางอย่างที่ฉันพบใน SO (รวมถึงอันนี้)
— Pieter VDE
ฉันทำสิ่งนี้
— Steve Greene

คำตอบ:

241

สำหรับ HTML ต่อไปนี้ (จากตัวอย่าง Bootstrap 3 ):

.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: grey;         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript" ></script>

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <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 class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <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 class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <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>
ขยายข้อมูลโค้ด

ผลภาพ:

bootstrap3 ไอคอนเชฟรอนบนหีบเพลง

— biggates
แหล่งที่มา
6
ใช้งานได้ดี ... นี่คือ jsFiddle สำหรับคุณ: jsfiddle.net/panchroma/3gYa3
— David Taiaroa
6
ในซอบั้งทั้งหมดชี้ลงในตอนแรก มีวิธีแก้ไขที่ง่ายหรือไม่?
— wuher
16
ฉันไม่เห็นโซลูชัน CSS ที่แท้จริงสำหรับสถานะเริ่มต้น ปัญหาคือ bootstrap ไม่ได้เพิ่มคลาส "ยุบ" ลงในลิงก์จนกว่าคุณจะยุบอย่างน้อยหนึ่งรายการ (แม้ว่าจะยุบทั้งหมดเพื่อเริ่มต้นก็ตาม) จากนั้นก็ลบคลาสนั้นออกจากลิงก์สำหรับ "open" ดังนั้นเนื่องจาก "เปิด" และ "ค่าเริ่มต้น" มีคลาสเดียวกันจึงไม่มีโซลูชัน CSS ที่ดี ตามหลักการแล้วสิ่งนี้จะได้รับการแก้ไขโดยการแก้ไขจาวาสคริปต์ของ bootstrap เพื่อเพิ่มคลาส "เปิด" เพื่อแยกความแตกต่าง ระหว่างนั้นใช้ชีวิตกับมันหรือใช้ JS จากคำตอบอื่น ๆ
— Carl Bussema
56
ฉันรู้ว่านี่เป็นโพสต์เก่า แต่เพื่อตอบปัญหาของคาร์ล - หากคุณเพิ่มคลาส "ยุบ" ในแท็กจุดยึดทั้งหมดที่มี "accordion-toggle" ปัญหาของคุณจะหายไป .... ดังนั้นให้ "ยุบปิดหีบเพลง " จากนั้น JQuery จะเพิ่มและลบคลาสเมื่อต้องการ
— steakpi
5
ฉันแก้ไขตัวอย่างนี้เพื่อให้สามารถคลิกส่วนหัวทั้งหมดได้ ข้อบกพร่องเล็กน้อยอย่างหนึ่งที่ฉันสังเกตเห็นคือข้อความที่ด้านขวาสุดของแต่ละแผงจะถูก "ดัน" เล็กน้อยจนกระทั่งหลังจากภาพเคลื่อนไหวเปิด / ปิดสไลด์เสร็จสิ้น หากใครรู้วิธีแก้ไขโปรดทำ นี่คือซอ: อัปเดต JSFiddle
— Pieter VDE
57

คุณสามารถใช้รหัสประเภทนี้:

function toggleChevron(e) {
    $(e.target)
        .prev('.panel-heading')
        .find('i.indicator')
        .toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);

=> ทำงานJsFiddle

— zessx
แหล่งที่มา
2
นั่นเป็นวิธีที่ดีกว่ามาก zessx เพื่อนที่ทำได้ดี นี่เป็นโซลูชันแรกที่สะอาดที่ฉันเคยเห็นตั้งแต่ Bootstrap 3 เปิดตัว
— Ryan Scott
9
คุณสามารถใช้ได้เช่นกัน$('#accordion').on('hidden.bs.collapse shown.bs.collapse', toggleChevron);
— Sniper Wolf
4
หากคุณต้องการให้ลูกศรเลื่อนไปที่จุดเริ่มต้นของการยุบแทนที่จะเป็นตอนท้ายคุณสามารถใช้$('#accordion').on('hide.bs.collapse show.bs.collapse', toggleChevron);แทนได้
— Will Parker
นี้ได้ผลดีมาก ฉันจะทำให้ไอคอนสลับเร็วขึ้นได้อย่างไร
— Rachel S
@RachelS คำแนะนำจาก Will Parker ทำให้เร็วขึ้น
— Phil Jollans
22

เพื่อปรับปรุงคำตอบด้วยการปรับตัวให้มากที่สุดบางท่านอาจสังเกตเห็นในการโหลดครั้งแรกของหน้าเว็บว่าบั้งทั้งหมดชี้ไปในทิศทางเดียวกัน แก้ไขได้โดยการเพิ่มคลาส "ยุบ" ให้กับองค์ประกอบที่คุณต้องการโหลดแบบยุบ

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <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 class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <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 class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <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>

นี่คือซอที่ใช้งานได้: http://jsfiddle.net/3gYa3/585/

— Dmidify
แหล่งที่มา
10

การปรับปรุงคำตอบของ Bludream:

คุณสามารถใช้ FontAwesome ได้แน่นอน!

อย่าลืมรวมคลาส "ยุบ" พร้อมกับคลาส "panel-head" คลาส "ยุบ" จะไม่รวมอยู่จนกว่าคุณจะคลิกที่แผงควบคุมดังนั้นคุณจึงต้องการรวมคลาส "ยุบ" เพื่อแสดงบั้งที่ถูกต้อง (กล่าวคือรูปบั้งด้านขวาจะแสดงเมื่อยุบและลดลงเมื่อเปิด)

HTML

<div class="panel panel-default">
    <div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapseOrderItems1">Products 1 <i class="chevron fa fa-fw" ></i></div>
    <div class="collapse" id="collapseOrderItems1">
        <p>Lorem ipsum...</p>
    </div>
</div>

CSS

.panel-heading .chevron:after {
    content: "\f078";   
}
.panel-heading.collapsed .chevron:after {
    content: "\f054";   
}

นอกจากนี้ควรสร้างคลาสใหม่แทนการใช้คลาสที่มีอยู่แล้ว

ดู Codepen เช่นhttp://codepen.io/anon/pen/PPxOJX

— ปราสาท
แหล่งที่มา
และด้วย fontawesome 4: fa-chevron-up สำหรับองค์ประกอบและ. collapsed .fa-chevron-up: before {content: "\ f077";} สำหรับชั้นเรียน
— Denis Chenu
9

ขอบคุณ biggates และ steakpi ในฐานะที่เป็นคำตอบของคำถาม Dreamonic ฉันได้ทำการเปลี่ยนแปลงเล็กน้อยเพื่อให้ส่วนหัวทั้งหมดคลิกได้ (ไม่ใช่เฉพาะสตริงชื่อเรื่องและ gluphs) และลบขีดเส้นใต้ออกจากลิงก์ ในการบังคับให้ไอคอนปรากฏในบรรทัดเดียวกันฉันได้เพิ่ม h4 ในตอนท้ายของคำแนะนำ CSS นี่คือรหัสที่แก้ไข:

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">      
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          <h4 class="panel-title">Collapsible Group Item #1</h4>
        </a>      
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <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 class="panel panel-default">
    <div class="panel-heading">      
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          <h4 class="panel-title">Collapsible Group Item #2</h4>
        </a>      
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <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 class="panel panel-default">
    <div class="panel-heading">      
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          <h4 class="panel-title">Collapsible Group Item #3</h4>
        </a>      
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <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>

และ CSS ที่แก้ไข:

.panel-heading .accordion-toggle h4:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  
    content: "\e114";    
    float: right;        
    color: grey;        
    overflow: no-display;
}
.panel-heading .accordion-toggle.collapsed h4:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    
}
a.accordion-toggle{
    text-decoration: none;
}
— Jeff_Alieffson
แหล่งที่มา
7

นี่คือคลาสตัวช่วย css บริสุทธิ์สองสามคลาสที่ให้คุณจัดการกับเนื้อหาแบบสลับได้ทุกประเภทใน html ของคุณ

ใช้งานได้กับองค์ประกอบที่คุณต้องการเปลี่ยน ไม่ว่าเลย์เอาต์ของคุณจะเป็นแบบไหนคุณก็แค่วางมันไว้ในองค์ประกอบสองสามอย่างด้วยคลาส. if-ยุบและ. if-not-ยุบภายในองค์ประกอบสลับ

สิ่งเดียวที่จับได้คือคุณต้องแน่ใจว่าคุณได้ใส่สถานะเริ่มต้นของการสลับที่ต้องการแล้ว หากปิดในตอนแรกให้ใส่คลาสที่ยุบลงในการสลับ

นอกจากนี้ยังต้องใช้ตัวเลือก: ไม่ใช้งานบน IE8

ตัวอย่าง HTML:

<a class="btn btn-primary collapsed" data-toggle="collapse" href="#collapseExample">
  <!--You can put any valid html inside these!-->
  <span class="if-collapsed">Open</span>
  <span class="if-not-collapsed">Close</span>
</a>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

เวอร์ชันน้อยกว่า:

[data-toggle="collapse"] {
    &.collapsed .if-not-collapsed {
         display: none;
    }
    &:not(.collapsed) .if-collapsed {
         display: none;
    }
}

เวอร์ชัน CSS:

[data-toggle="collapse"].collapsed .if-not-collapsed {
  display: none;
}
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
  display: none;
}
— Jens
แหล่งที่มา
6

ฉันรู้ว่ามันเก่า แต่ตอนนี้มันเป็นปี 2018 ฉันคิดว่าฉันจะตอบกลับทำให้ดีขึ้นโดยการทำให้โค้ดง่ายขึ้นและเพิ่มประสบการณ์ของผู้ใช้โดยการทำให้เชฟรอนหมุนตามการยุบหรือไม่ ฉันใช้ FontAwesome อย่างไรก็ตาม นี่คือ CSS:

a[data-toggle="collapse"] .rotate {
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
   -ms-transition: all 0.2s ease-out;
   -o-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
   -moz-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
}
a[data-toggle="collapse"].collapsed .rotate {
   -moz-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
}

นี่คือ HTML สำหรับส่วนแผงควบคุม:

  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
          <i class="fa fa-chevron-right pull-right rotate"></i>
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <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>

ฉันใช้ bootstraps pull-right เพื่อดึง chevron ไปทางขวาของส่วนหัวของพาเนลซึ่งควรเป็นแบบเต็มความกว้างและตอบสนอง CSS ทำงานภาพเคลื่อนไหวทั้งหมดและหมุนบั้งตามว่าแผงถูกยุบหรือไม่ ง่าย

— Robert Lindabury
แหล่งที่มา
4

ทำงานตัวอย่างง่ายๆ

  • รับสภาพร่างกายที่แสดง / ซ่อน
  • ไปหาผู้ปกครอง
  • รับไอคอนค้นหา
  • เปลี่ยนไอคอน

ใส่ง่ายๆ

HTML :

<body>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#jai">Jai</a>
        </div>
        <div id="jai" class="accordion-body collapse in">
            <div>
                <div class="accordion-inner">body content 1</div>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">jai2</a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
            <div>
                <div class="accordion-inner">body content 2</div>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse3">jai3</a>
        </div>
        <div id="collapse3" class="accordion-body collapse">
            <div>
                <div class="accordion-inner">body content 3</div>
            </div>
        </div>
    </div>
</body>

JavaScript 

$('div.accordion-body').on('shown', function () {
    $(this).parent("div").find(".icon-chevron-down")
           .removeClass("icon-chevron-down").addClass("icon-chevron-up");
});

$('div.accordion-body').on('hidden', function () {
    $(this).parent("div").find(".icon-chevron-up")
           .removeClass("icon-chevron-up").addClass("icon-chevron-down");
});
— ใจ
แหล่งที่มา
1

ฉันใช้แบบอักษรที่ยอดเยี่ยม ! และต้องการแผงที่พับเก็บได้

        <div class="panel panel-default">
                <div class="panel-heading" data-toggle="collapse" data-target="#collapseOrderItems"><i class="fa fa-chevron fa-fw" ></i> products</div>

                <div class="collapse in" id="collapseOrderItems">
                            ....
                </div>
        </div>

และ css

.panel-heading .fa-chevron:after {
    content: "\f078";   
}
.panel-heading.collapsed .fa-chevron:after {
    content: "\f054";   
}

ใส่คำอธิบายภาพที่นี่

ใส่คำอธิบายภาพที่นี่

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

Angular ดูเหมือนจะทำให้เกิดปัญหากับวิธีการที่ใช้ JavaScript ที่นี่ (อย่างน้อยก็เป็นวิธีที่ฉันได้ลอง) ผมพบว่าการแก้ปัญหานี้ที่นี่: http://www.codeproject.com/Articles/987311/Collapsible-Responsive-Master-Child-Grid-Using-Ang ความสำคัญของมันคือการใช้data-ng-clickบนปุ่มสลับและสร้างวิธีการเปลี่ยนปุ่มในคอนโทรลเลอร์โดยใช้$scopeบริบท

ฉันเดาว่าฉันสามารถให้รายละเอียดเพิ่มเติมได้ ... ปุ่มของฉันถูกตั้งค่าเป็น glyphicon ของสถานะเริ่มต้นของ div ที่พวกมันยุบ (glyphicon-chevron-right == ยุบ div)

page.html:

<div class="title-1">
    <button data-toggle="collapse" data-target="#panel-{{ p_idx }}" class="dropdown-toggle title-btn glyphicon glyphicon-chevron-right" data-ng-click="collapse($event)"></button>
</div>
<div id="panel-{{ p_idx }}" class="collapse sect">
    ...
</div>

controllers.js:

.controller('PageController', function($scope, $rootScope) {
    $scope.collapse = function (event) {
        $(event.target).toggleClass("glyphicon-chevron-down glyphicon-chevron-right");
    };
)
— LostNomad311
แหล่งที่มา
1

หนึ่งในสายการบิน.

i.fa.fa-chevron-right.collapse.in { transform: rotate(180deg); }

ในตัวอย่างนี้จะใช้เพื่อจัดกลุ่มแถวตารางที่ยุบได้ สิ่งเดียวที่คุณต้องทำคือเพิ่มชื่อคลาสเป้าหมาย (ชื่อยุบของฉัน) ในไอคอนของคุณ:

<tr data-toggle="collapse" data-target=".my-collapse-name">
    <th><i class="fa fa-chevron-right my-collapse-name"></span></th>
    <th>Master Row - Title</th>
</tr>
<tr class="collapse my-collapse-name">
    <td></td>
    <td>Detail Row - Content</td>
</tr>

คุณสามารถทำได้เช่นเดียวกันกับคลาสคาเร็ตดั้งเดิมของ Bootstrap โดยใช้<span class='caret my-collapse-name'></span>และspan.caret.collapse.in { transform: rotate(90deg); }

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

หากคุณพยายามใช้สิ่งนี้กับพาเนลเท่านั้น (ไม่ใช่แอคคอร์ดออน) ให้ลองใช้รหัสนี้:

<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a class="collapse-toggle" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Panel heading with title</a>
        </h4>
    </div>
    <div id="collapseExample" class="panel-collapse collapse in">
        <div class="panel-body">
            Panel content
        </div>
    </div>
</div>
— นิลส์
แหล่งที่มา
-3

ฉันต้องการแนวทาง html ที่บริสุทธิ์เพราะฉันต้องการยุบและขยาย html ที่เพิ่มเข้ามาทันทีผ่านเทมเพลต! ฉันมากับสิ่งนี้ ...

https://jsfiddle.net/3mguht2y/1/

var noJavascript = ":)";

ซึ่งอาจมีประโยชน์กับใครบางคน :)

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