Bootstrap列表组菜单在单击时会展开，但不会折叠

Question

I've created a sidebar list-group menu in Bootstrap that expands on the first click, but the second click doesn't collapse the menu back, and clicking on other items simply expands them as well without collapsing anything.

    <div id="accordion" class="list-group">
        <a class="list-group-item" data-toggle="collapse" data-parent="#accordion" data-target="#listofOptions">List Header 1</a>
            <div class="list-group-collapse collapse" id="listofOptions">
                <a class="list-group-item" href="#">List Item 1</a>
                <a class="list-group-item" href="#">list Item 2</a>
            </div>
        <a class="list-group-item" data-toggle="collapse" data-parent="#accordion" data-target="#listofOptions2">List Header 2</a>
            <div class="list-group-collapse collapse" id="listofOptions2">
                <a class="list-group-item" href="#">List Item 1</a>
                <a class="list-group-item" href="#">list Item 2</a>
            </div>      
    </div>

I'm using standard bootstrap.min.js and none of my custom JavaScript is touching the .collapse scripts, at least not intentionally.

Answer 1

If you have this issue, check and make sure that your CMS isn't duplicating a call to any of the jQuery libraries twice. I found that due to a typo, my header was repeating and the double-call was causing several minor - but annoying - bugs.