twitter-bootstrap - 当其中一个部分在引导程序 4 中展开时，如何停止折叠其他部分？

Question

我有一个这样的手风琴：

<div class="accordion" id="accordionExample">
       
       <!-- First -->
        <div class="card">
            
            <div class="card-header" id="headingOne">
                <h5 class="mb-0">
                    <button class="btn btn-link text-primary px-0 text-uppercase" type="button"
                            data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
                            aria-controls="collapseOne">
                        First block                        </button>
                </h5>
            </div>

            <div id="collapseOne" class="collapse " aria-labelledby="headingOne"
                 data-parent="#accordionExample">
                <div class="card-body">

                     <div class="form-check">
                        <input type="checkbox"  class="form-check-input filter" id="automatic" >
                        <label class="form-check-label" for="automatic">One</label>
                    </div>                          
                       
                        
                     <div class="form-check">
                        <input type="checkbox"  class="form-check-input filter" id="automatic" >
                        <label class="form-check-label" for="automatic">Two</label>
                    </div>                          
                       
                        
                     <div class="form-check">
                        <input type="checkbox"  class="form-check-input filter" id="automatic" >
                        <label class="form-check-label" for="automatic">Three</label>
                    </div>                          
                       
                        
                                            
                       
                                                
                </div>
            </div>
        </div>
        
      <!-- Second block -->
      <div class="card">
            
            <div class="card-header" id="headingTwo">
                <h5 class="mb-0">
                    <button class="btn btn-link text-primary px-0 text-uppercase" type="button"
                            data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true"
                            aria-controls="collapseTwo">
                        Second Block                        </button>
                </h5>
            </div>

            <div id="collapseTwo" class="collapse " aria-labelledby="headingTwo"
                 data-parent="#accordionExample">
                <div class="card-body">

                     <div class="form-check">
                        <input type="checkbox"  class="form-check-input" id="automatic2" >
                        <label class="form-check-label" for="automatic2">One</label>
                    </div>                          
                       
                        
                     <div class="form-check">
                        <input type="checkbox"  class="form-check-input" id="automatic2" >
                        <label class="form-check-label" for="automatic2">Two</label>
                    </div>                          
                       
                        
                     <div class="form-check">
                        <input type="checkbox"  class="form-check-input" id="automatic2" >
                        <label class="form-check-label" for="automatic2">Three</label>
                    </div>                          
                       
                        
                     <div class="form-check">
                        <input type="checkbox"  class="form-check-input" id="automatic2" >
                        <label class="form-check-label" for="automatic2">Four</label>
                    </div>                          
                     
                                                
                </div>
            </div>
        </div>
       
      <!-- Third block -->  
      <div class="card">
            
            <div class="card-header" id="headingThree">
                <h5 class="mb-0">
                    <button class="btn btn-link text-primary px-0 text-uppercase" type="button"
                            data-toggle="collapse" data-target="#collapseThree" aria-expanded="true"
                            aria-controls="collapseThree">
                        Third block                        </button>
                </h5>
            </div>

            <div id="collapseThree" class="collapse " aria-labelledby="headingOne"
                 data-parent="#accordionExample">
                <div class="card-body">

                     <div class="form-check">
                        <input type="checkbox"  class="form-check-input" id="automatic3" >
                        <label class="form-check-label" for="automatic3">One</label>
                    </div>                          
                       
                        
                     <div class="form-check">
                        <input type="checkbox"  class="form-check-input" id="automatic3" >
                        <label class="form-check-label" for="automatic3">Two</label>
                    </div>                          
                       
                        
                     <div class="form-check">
                        <input type="checkbox"  class="form-check-input" id="automatic3" >
                        <label class="form-check-label" for="automatic3">Three</label>
                    </div>                          
                       
                        
                     <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="automatic3" >
                        <label class="form-check-label" for="automatic3">Four</label>
                    </div>                          
                       
                                            
                                                
                       
                                                
                </div>
            </div>
        </div>
        </div>

我使用 bootstrap 4 使其可折叠/可扩展。现在的行为是这样的：当我单击一个块时，它会展开，然后当我单击另一个块时，另一个块会展开，但前一个块会折叠。我想做另一种行为 - 在单击另一个块时不要折叠先前展开的块。如果有什么东西被打开了——让它保持打开状态。我怎么能用引导程序做到这一点？这是 jsfiddle - https://jsfiddle.net/dLa4p0uc/

标签： twitter-bootstrap

Answer 1

所以最后我刚刚删除了：

data-parent="#accordionExample"

在这个例子中到处都是，这就是我需要的。是啊