多重崩溃bootstrap 3.3.4

Question

这是我的问题，我想关闭每个项目 (h3) 我知道第一个必须打开，但我希望关闭所有其他项目。实际上，崩溃正在起作用，但它们都是"open" 我尽量减少代码，让你看到最相关的，所以你可以看到只有 2 个项目，但我可以有超过 100 个我删除了 php 因为他构建了你在那里可以看到的东西。

<div class="categorie">
    <div class="row">
        <div class="col-xs-12">
            <div class="well-header" data-toggle="collapse" data-target=".collapse-csnm" aria-expanded="false" aria-controls="livraison_1_0 ">
                <h3>CSNM</h3>
                <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
            </div>
        <div class="well well-white test collapse-csnm in"  id="livraison_1_0"              
            <div class="well-content">
                <div class="row">
                    <blockquote class="recap">
                        <p class="labels">
                            <span class="label label-primary">Développement</span>
                            <a href=# target="_blank"><span class="label label-default">Url</span></a>
                            <span id="state-projetcheklist-1" class="state state-nosmile"></span>
                        </p>
                        <p data-toggle="collapse" href="#site-1" aria-expanded="false" aria-controls="site">
                                Content
                        </p>
                        </blockquote>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="categorie">
    <div class="row">
        <div class="col-xs-12">
            <div class="well-header" data-toggle="collapse" data-target=".collapse-salt-travel" aria-expanded="false" aria-controls="livraison_3_0 ">
                <h3>Salt Travel</h3>
                <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
            </div>
        <div class="well well-white test collapse-salt-travel in"  id="livraison_3_0"                    <div class="well-content">
            <div class="row">
                <blockquote class="recap">
                    <p class="labels">
                        <span class="label label-primary">Intégration</span>
                        <a href=# target="_blank"><span class="label label-default">Url</span></a>
                        <span id="state-projetcheklist-3" class="state state-nosmile"></span>
                    </p>
                    <p data-toggle="collapse" href="#structure-accueil-3" aria-expanded="false" aria-controls="structure-accueil">
                                Content
                    </p>
                </blockquote>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

那么您知道如何打开第一个并关闭所有其他的吗？谢谢你的帮助。

Answer 1

你的 HTML 有一个小错误，用 div 的 collapse 替换所有 in class 谁有 class well

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="categorie">
    <div class="row">
        <div class="col-xs-12">
            <div class="well-header" data-toggle="collapse" data-target=".collapse-csnm" aria-expanded="false" aria-controls="livraison_1_0 ">
                <h3>CSNM</h3>
                <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
            </div>
        <div class="well well-white test collapse-csnm collapse"  id="livraison_1_0"              
            <div class="well-content">
                <div class="row">
                    <blockquote class="recap">
                        <p class="labels">
                            <span class="label label-primary">Développement</span>
                            <a href=# target="_blank"><span class="label label-default">Url</span></a>
                            <span id="state-projetcheklist-1" class="state state-nosmile"></span>
                        </p>
                        <p data-toggle="collapse" href="#site-1" aria-expanded="false" aria-controls="site">
                                Content
                        </p>
                        </blockquote>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="categorie">
    <div class="row">
        <div class="col-xs-12">
            <div class="well-header" data-toggle="collapse" data-target=".collapse-salt-travel" aria-expanded="false" aria-controls="livraison_3_0 ">
                <h3>Salt Travel</h3>
                <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
            </div>
        <div class="well well-white test collapse-salt-travel collapse"  id="livraison_3_0"                    <div class="well-content">
            <div class="row">
                <blockquote class="recap">
                    <p class="labels">
                        <span class="label label-primary">Intégration</span>
                        <a href=# target="_blank"><span class="label label-default">Url</span></a>
                        <span id="state-projetcheklist-3" class="state state-nosmile"></span>
                    </p>
                    <p data-toggle="collapse" href="#structure-accueil-3" aria-expanded="false" aria-controls="structure-accueil">
                                Content
                    </p>
                </blockquote>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

多重崩溃bootstrap 3.3.4

Multiple collapse bootstrap 3.3.4

html

collapse

twitter-bootstrap-3