Question

这是我的问题，我想在每个项目（h3）上关闭崩溃我知道第一个必须打开，但我希望所有其他项目都关闭。实际上，崩溃是有效的，但它们都是开放式的＃34; 我试图最小化代码，让你看到最相关的，所以你可以看到只有2个项目，但我可以有超过一百个我删除了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中有一个小错误，将所有in类替换为collapse，其中div为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>

多次崩溃自举3.3.4

1 个答案: