จะทำให้หีบเพลง Bootstrap ยุบเมื่อคลิกที่ div header ได้อย่างไร?

167

ในหีบเพลง Bootstrap แทนที่จะต้องการคลิกที่aข้อความฉันต้องการทำให้มันยุบเมื่อคลิกที่ใดก็ได้ในpanel-headingdiv

ฉันใช้ Bootstrap 3 ดังนั้นแทนที่จะเป็นหีบเพลงมันเป็นเพียงแผงพับได้ ความคิดวิธีการทำแผงทั้งหมดคลิกได้?

twitter-bootstrap twitter-bootstrap-3

คุณได้คำตอบแล้ว แต่ลิงค์นี้จะช่วยให้คุณค้นพบสไตล์ที่แตกต่างกันของ Bootstrap Accordion Menus designerlib.com/bootstrap-accordion-menu

— Karuppiah RK

292

สิ่งที่คุณต้องทำคือการใช้ ...

data-toggle="collapse"
data-target="#ElementToExpandOnClick"

... บนองค์ประกอบที่คุณต้องการคลิกเพื่อเรียกใช้เอฟเฟกต์การยุบ / ขยาย

องค์ประกอบที่มีdata-toggle="collapse"จะเป็นองค์ประกอบที่จะทำให้เกิดผล data-targetแอตทริบิวต์บ่งชี้องค์ประกอบที่จะขยายผลเมื่อถูกเรียก

คุณสามารถตั้งค่าdata-parentหากคุณต้องการสร้างเอฟเฟกต์หีบเพลงแทนการยุบตัวได้อย่างอิสระเช่น:

data-parent="#accordion"

ฉันจะเพิ่ม CSS ต่อไปนี้ให้กับองค์ประกอบด้วยdata-toggle="collapse"หากมันไม่ใช่<a>แท็กเช่น:

.panel-heading {
    cursor: pointer;
}

นี่คือjsfiddleกับ html ที่มีการปรับเปลี่ยนจากเอกสาร Bootstrap 3

— น่ากลัว
แหล่งที่มา

11

ดูเหมือนว่าสิ่งนี้ควรเป็นรหัสเริ่มต้น / การสาธิต ดีกว่าการใช้ <a>

— dbn

วิธีนี้ใช้ไม่ได้กับ iPhone ตามคำตอบของstackoverflow.com/questions/19866172/จะต้อง <a> (เนื่องจากต้องใช้ href) เพื่อให้สามารถพับได้บน iphone ... แนวคิดใด ๆ

— minovsky

2

@minovsky วิธีการเกี่ยวกับการปรับปรุง JSFiddle นี้: jsfiddle.net/Tcgyx/60 ? น่าเสียดายที่ฉันไม่มี iPhone ที่จะทำการทดสอบ ฉันจะอัปเดตคำตอบถ้าใช้งานได้

— น่ากลัว

@ ขอบขอบคุณสำหรับซอ! มันไม่ได้ผลเสมอไป แต่ให้ฉันทดลองมากกว่านี้และหาว่าฉันสามารถสร้างความล้มเหลวได้อย่างน่าเชื่อถือหรือไม่

— minovsky

1

@wutzebaer คุณสามารถทำได้role="tab button"และเบราว์เซอร์จะตีความรายการแรกในรายการที่เข้าใจ (เป็นไปได้มากที่สุดtab) แม้ว่าฉันไม่แน่ใจว่าหนึ่งในสองนั้นดีกว่า พยายามหาความหมายของtabและbuttonบทบาทและนั่นจะให้คำตอบตามที่คุณเลือก

— น่ากลัว

67

อีกวิธีคือทำของคุณ <a>เติมเต็มพื้นที่ทั้งหมดของpanel-headingคุณ ใช้สไตล์นี้เพื่อทำ:

.panel-title a {
    display: block;
    padding: 10px 15px;
    margin: -10px -15px;
}

ตรวจสอบตัวอย่างนี้ ( http://jsfiddle.net/KbQyx/ )

<a>จากนั้นเมื่อคุณคลิกที่หัวข้อคุณเป็นจริงคลิกที่

— calfzhou
แหล่งที่มา

วิธีแก้ปัญหาที่ยอดเยี่ยมสำหรับพวกเราที่ใช้ห้องสมุด GWTBootstrap

— หิมะตก

ฉันไม่เห็นสิ่งนี้จนกว่าฉันจะใช้โซลูชันที่คล้ายกัน การเปลี่ยนแปลง CSS เป็นการเปลี่ยนแปลงที่น้อยที่สุดสำหรับฉัน ฉันเลือก display: inline-block, width: 100% และเนื่องจากเราใช้ Glyphicons สำหรับเรา a: ก่อนที่จะมี margin-left: -10px และ margin-right: 10px

— Kirk Liemohn

1

วิธีนี้ใช้ไม่ได้กับอุปกรณ์ iOS ซึ่งโดยทั่วไปมักเป็นปัญหาหลักเมื่อทำงานกับ Bootstrap

— Jared

จาเร็ดคุณสามารถทำอย่างละเอียด? เหตุใดสิ่งนี้ใช้งานไม่ได้กับบางรุ่นของ Safari

— ดร. Jan-Philip Gehrcke

1

ข้อดีของวิธีนี้คือมันใช้ได้กับ Boostrap UI สำหรับ AngularJS (ที่คุณไม่ต้องการ / ต้องการ JS ของ Bootstrap)

— ดร. Jan-Philip Gehrcke

12

ฉันสังเกตเห็นข้อบกพร่องเล็กน้อยใน jsfiddle ของ grim

หากต้องการให้ตัวชี้เปลี่ยนเป็นมือสำหรับการใช้งานพาเนลทั้งหมด:

.panel-heading {
   cursor: pointer;
}

ผมได้ลบ<a>แท็ก (ปัญหา style) และเก็บไว้data-toggle="collapse" data-parent="#accordion" data-target="#collapse..."บนpanel-headingตลอด

ฉันได้เพิ่มวิธี CSS สำหรับการแสดงรูปตัววีโดยใช้font-awesome.cssใน jsfiddle ของฉัน:

http://jsfiddle.net/weaversnap/7FqsX/1/

— WeaverSnap
แหล่งที่มา

เกือบจะใช้งานได้แล้ว บั้งปรากฏขึ้นคว่ำหน้าเมื่อโหลดและแก้ไขตัวเองหลังจากขยายและยุบพาเนลตัวใดตัวหนึ่ง

— Connie DeCinko

@ConnieDeCinko เปลี่ยนpanel-headingเป็นpanel-heading collapsedแก้ไขบั้งคว่ำ

— Amy Barrett

5

นี่คือทางออกสำหรับ Bootstrap4 คุณเพียงแค่ใส่card-headerคลาสในaแท็ก นี่คือการปรับเปลี่ยนจากตัวอย่างใน W3Schools

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <div id="accordion">
    <div class="card">
      <a class="card-link card-header" data-toggle="collapse" href="#collapseOne" >
        Collapsible Group Item #1
      </a>
      <div id="collapseOne" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <a class="collapsed card-link card-header" data-toggle="collapse" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <a class="card-link card-header" data-toggle="collapse" href="#collapseThree">
        Collapsible Group Item #3
      </a>
      <div id="collapseThree" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
  </div>
</div>

ขยายตัวอย่างข้อมูล

— user2233706
แหล่งที่มา

4

วิธีง่ายๆที่จะลบช่องว่างจากและเพิ่ม.panel-heading.panel-title a

.panel-heading {
    padding: 0;
}
.panel-title a {
    display: block;
    padding: 10px 15px;
}

วิธีการแก้ปัญหานี้คล้ายกับที่กล่าวข้างต้นโดยcalfzhouแตกต่างกันเล็กน้อย

— จังหวะ Ruparelia
แหล่งที่มา

1

ที่จริงฉันมีแผงนี้การล่มสลายของรัฐไอคอนลูกศรและฉันพยายามคำตอบอื่น ๆ ในโพสต์นี้ แต่ตำแหน่งไอคอนเปลี่ยนเพื่อให้ที่นี่เป็นวิธีการแก้ปัญหากับรัฐล่มสลายไอคอนลูกศร

เพิ่ม CSS ที่กำหนดเองนี้

 .panel-heading 
  {
   cursor: pointer;
   padding: 0;
  }

 a.accordion-toggle 
 {
  display: block;
  padding: 10px  15px;
 }

เครดิตไปนี้ตอบโพสต์

หวังว่าจะช่วย

— shaijut
แหล่งที่มา

0

นี่คือตัวอย่างการทำงานสำหรับ Bootstrap 4.3

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="accordion" id="accordionExample">
                <div class="card">
                    <div class="card-header" id="headingOne" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <h2 class="mb-0">
                            <button class="btn btn-link" type="button" >
                                Collapsible Group Item #1
                            </button>
                        </h2>
                    </div>

                    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingTwo" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <h2 class="mb-0">
                            <button class="btn btn-link collapsed" type="button" >
                                Collapsible Group Item #2
                            </button>
                        </h2>
                    </div>
                    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingThree" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        <h2 class="mb-0">
                            <button class="btn btn-link collapsed" type="button" >
                                Collapsible Group Item #3
                            </button>
                        </h2>
                    </div>
                    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
            </div>

ขยายตัวอย่างข้อมูล

— ผู้พัฒนา
แหล่งที่มา