Div başlığına tıklandığında Bootstrap akordeonunun daraltılması nasıl yapılır?

167

Bir Bootstrap akordeonunda, ametne tıklamak yerine, div'ın herhangi bir yerine tıkladığınızda onu daraltmak istiyorum panel-heading.

Bootstrap 3 kullanıyorum. Bu yüzden akordeon yerine, sadece katlanabilir bir panel. Tüm panelin tıklanabilir hale nasıl getirileceği hakkında bir fikrin var mı?

twitter-bootstrap  twitter-bootstrap-3 
— 9blue
kaynak
Bir cevabın var. Ancak, bu bağlantı Bootstrap Akordeon Menülerinin farklı stillerini bulmanıza yardımcı olacaktır designerslib.com/bootstrap-accordion-menu
— Karuppiah RK

Yanıtlar:

292

Tek yapmanız gereken kullanmak ...

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

... daraltmak / genişletmek efektini tetiklemek için tıklamak istediğiniz öğenin üzerine tıklayın.

Öğesiyle öğe data-toggle="collapse", efekti tetikleyen öğedir. data-targetNitelik etkisi tetiklendiğinde genişleyecektir elemanı gösterir.

İsteğe bağlı olarak data-parent, bağımsız katlanabilir yerine akordeon efekti oluşturmak isteyip istemediğinizi, örneğin:

  • data-parent="#accordion"

Ayrıca , örneğin etiket data-toggle="collapse"değilse , öğelere aşağıdaki CSS <a>eklerdim:

.panel-heading {
    cursor: pointer;
}

İşte Bootstrap 3 belgelerinden değiştirilmiş html ile bir jsfiddle .

— gaddar
kaynak
11
Bunun varsayılan / demo kodu olması gerektiği anlaşılıyor. <a> kullanmaktan çok daha hoş.
— dbn
bu yöntem iphone için çalışmaz. stackoverflow.com/questions/19866172/… cevabına göre iphone'da daraltılabilmesi için <a> (href gerektirdiği için) olması gerekiyor ... herhangi bir fikir?
— minovsky
2
@minovsky Peki bu güncellenmiş JSFiddle: jsfiddle.net/Tcgyx/60 ? Ne yazık ki test edeceğim bir iPhone'um yok. Bu işe yararsa cevabımı güncelleyeceğim.
— Grim
@ gaddar keman için teşekkürler! Her zaman işe yaramaz, ancak daha fazla deney yapmama ve hatayı güvenilir bir şekilde üretip üretemeyeceğime bakalım.
— 20vs14
1
@wutzebaer Sahip olabilirsiniz role="tab button"ve tarayıcı listedeki ilkini anlayacaktır (büyük olasılıkla tab). Yine de, ikisinden hangisinin daha iyi olduğundan emin değilim. tabVe buttonrollerin anlamını bulmaya çalışın ve bu size hangisini seçeceğiniz konusunda cevap verecektir.
— Grim
67

Başka bir yol, <a>tüm alanını tam olarak doldurmaktır panel-heading. Bunu yapmak için bu stili kullanın:

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

Bu demoya bakın ( http://jsfiddle.net/KbQyx/ ).

Sonra başlığa tıkladığınızda, aslında <a>.

— calfzhou
kaynak
GWTBootstrap kütüphanesini kullanarak bizler için harika bir çözüm.
— snowe
Benzer bir çözüm uygulayana kadar bunu görmedim. CSS değişiklikleri benim için en az invaziv değişiklikti. Display: inline-block, width: 100% 'i seçtik ve bizim için Glificons kullandığımız için, a: before margin-left: -10px ve margin-right: 10px.
— Kirk Liemohn
1
Bu yöntem, genellikle Bootstrap ile çalışırken birincil sorun olan iOS cihazlarda çalışmaz.
— Jared
Jared, biraz açıklayabilir misin? Bu neden bazı Safari sürümleriyle sınırlı değil?
— Dr.Jan-Philip Gehrcke
1
Bu yöntemin avantajı, AngularJS için Boostrap UI için de (Bootstrap'ın JS'sini istemediğiniz / ihtiyaç duymadığınız) çalışmasıdır.
— Dr.Jan-Philip Gehrcke
12

Grim'in jsfiddle'ında birkaç küçük kusur fark ettim.

İşaretçinin panelin tamamı için bir ele dönüşmesini sağlamak için:

.panel-heading {
   cursor: pointer;
}

Ben kaldırdık <a>etiketi (bir stil sorunu) ve muhafaza data-toggle="collapse" data-parent="#accordion" data-target="#collapse..."üzerinde panel-headingboyunca.

font-awesome.cssBenim jsfiddle kullanarak , chevron görüntülemek için bir CSS yöntemi ekledim:

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

— WeaverSnap
kaynak
Bu neredeyse işe yarıyor. Sayfa yüklendiğinde köşebentler baş aşağı görünür ve panellerden birini genişletip daralttıktan sonra kendilerini düzeltirler.
— Connie DeCinko
@ConnieDeCinko Değişim panel-headingiçin panel-heading collapsedters chevrons düzeltmek için.
— Amy Barrett
5

İşte Bootstrap4 için bir çözüm. card-headerSınıfı aetikete koymanız yeterlidir . Bu, W3Schools'taki bir örnekten değiştirilmiştir .

<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>
Snippet'i genişlet

— user2233706
kaynak
4

Basit çözüm dolgu kaldırmak .panel-headingve eklemek olacaktır .panel-title a.

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

Bu çözüm calfzhou tarafından yayınlanan yukarıdakine benzer , biraz farklı.

— Ritim Ruparelia
kaynak
1

Aslında panelimde bu daralma durumu ok simgesi vardı ve bu yazıdaki diğer yanıtları denedim, ancak simge konumu değişti, işte daralma durumu ok simgesi ile çözüm .

Bu Özel CSS'yi ekle

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

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

Kredi bu gönderiye cevap veriyor .

Umut yardımcı olur.

— shaijut
kaynak
0

İşte Bootstrap 4.3 için çalışma örneği 

<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>
Snippet'i genişlet

— Geliştirici
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.