javascript - Bootstrap collapse with just one element shown - Stack Overflow

admin管理员组

文章数量:1336170

I'm trying to use the collapse ponents of Bootstrap.

It works well but I noticed that sometimes it doesn't close all the other elements; when I click in order from the first to the third and then back to the first again, the third one remains open.

My markup is the same as the example code that Bootstrap provides, because I'm just testing for now.

 <div class="accordion" id="accordion2"> 
        <div class="accordion-group"> 
          <div class="accordion-heading"> 
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
              Collapsible Group Item #1
            </a> 
          </div> 
          <div id="collapseOne" class="accordion-body collapse in"> 
            <div class="accordion-inner"> 
             Part 1
            </div> 
          </div> 
        </div> 

        <div class="accordion-group"> 
          <div class="accordion-heading"> 
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
              Collapsible Group Item #2
            </a> 
          </div> 
          <div id="collapseTwo" class="accordion-body collapse"> 
            <div class="accordion-inner"> 
             Part 2
            </div> 
          </div> 
        </div> 

        <div class="accordion-group"> 
          <div class="accordion-heading"> 
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"> 
              Collapsible Group Item #3
            </a> 
          </div> 
          <div id="collapseThree" class="accordion-body collapse"> 
            <div class="accordion-inner"> 
              Part 3
            </div> 
          </div> 
   </div> 

The JavaScript code is this:

$(".collapse").collapse("#accordion2");

Considering that I'm thinking to use this ponents in a menu, in order to show a group open according to a PHP variable value do I just have to print the class in to the div collapseOne/collapseTwo and so on?

I'm trying to use the collapse ponents of Bootstrap.

It works well but I noticed that sometimes it doesn't close all the other elements; when I click in order from the first to the third and then back to the first again, the third one remains open.

My markup is the same as the example code that Bootstrap provides, because I'm just testing for now.

 <div class="accordion" id="accordion2"> 
        <div class="accordion-group"> 
          <div class="accordion-heading"> 
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
              Collapsible Group Item #1
            </a> 
          </div> 
          <div id="collapseOne" class="accordion-body collapse in"> 
            <div class="accordion-inner"> 
             Part 1
            </div> 
          </div> 
        </div> 

        <div class="accordion-group"> 
          <div class="accordion-heading"> 
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
              Collapsible Group Item #2
            </a> 
          </div> 
          <div id="collapseTwo" class="accordion-body collapse"> 
            <div class="accordion-inner"> 
             Part 2
            </div> 
          </div> 
        </div> 

        <div class="accordion-group"> 
          <div class="accordion-heading"> 
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"> 
              Collapsible Group Item #3
            </a> 
          </div> 
          <div id="collapseThree" class="accordion-body collapse"> 
            <div class="accordion-inner"> 
              Part 3
            </div> 
          </div> 
   </div> 

The JavaScript code is this:

$(".collapse").collapse("#accordion2");

Considering that I'm thinking to use this ponents in a menu, in order to show a group open according to a PHP variable value do I just have to print the class in to the div collapseOne/collapseTwo and so on?

• javascript
• css
• twitter-bootstrap

Share Follow edited Oct 28, 2013 at 10:32 Spooky 3,01388 gold badges2929 silver badges4242 bronze badges asked Apr 29, 2012 at 2:26 user1225730user1225730 23544 silver badges1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You do not need the javascript part, in fact - remove it!! It is that code precisely that causes the strange behaviour - accordion2 is initialized twice resulting in a double set of "logic". Your problem is fully reproduceable by using either the javascript or not.

Generally, regarding twitter bootstrap, when you can place all your data and binding-functionality in data attributes, as you have done here, you'll never have to do javascript. TB does the job automatically when the page is loading, by looking for those data attributes.

Consider javascript as a second option, an alternate way, when you cant do what you want by simply adressing the data attributes.

If you made your markup according to bootstrap collapse docs you can achieve this with the following jQuery code:

$(document).on('click', '.accordion-toggle', function(e) {
    event.preventDefault();

    $('#accordion2').find('.accordion-body').collapse('hide');
    $(this).parent().next().collapse('show');
});

本文标签： javascriptBootstrap collapse with just one element shownStack Overflow