javascript - Bootstrap Collapse Accordion 一个面板打开，所有其他面板关闭

Question

我创建了两个引导 Accordion ，一个在另一个下面。当我将它们全部作为一个 Accordion 时，我不喜欢面板笨拙地移动位置的方式，因此我创建了两个单独的 Accordion 。这样做时，每个 Accordion 都按照我想要的方式工作:每个 Accordion 一次只能打开一个面板体，但我只想允许打开一个面板体..

为了更好地解释我的意思...... 目前，您可以在顶行和底行中打开一个面板主体。我希望您能够一次打开一个。

这可以做到吗？

这是我所做的一个例子 https://codepen.io/aahmed2/pen/yOQvVz

这是我的代码。

<div class="row">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

    <div class="panel panel-default col-md-4">
        <div class="panel-heading  bites-stings" role="tab" id="headingSeven">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                <h2>Bites and Stings</h2>
            </a>
        </div>
        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                <a href="health-resources/mosquitoes.html"><h4>Mosquitoes</h4></a>
                <a href="health-resources/ticks.html"><h4>Ticks</h4></a>
                <a href="#"><h4>Bees and Wasps</h4></a>
                <a href="#"><h4>Animal Bites</h4></a>
            </div>
        </div>
    </div>


    <div class="panel panel-default col-md-4">
        <div class="panel-heading pet-health" role="tab" id="headingTwo">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                <h2>Pet Health and Safety</h2>
            </a>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">
                <a href="#"><h4>Pet Allergies</h4></a>
                <a href="#"><h4>Toxic Plants</h4></a>
                <a href="#"><h4>Pet and Wildlife Encounters</h4></a>
            </div>
        </div>
    </div>


    <div class="panel panel-default col-md-4">
        <div class="panel-heading livestock-health" role="tab" id="headingThree">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                <h2>Livestock Health and Safety</h2>
            </a>
        </div>
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="panel-body">
                <a href="#"><h4>This is a Topic</h4></a>
                <a href="#"><h4>Topic 2</h4></a>
                <a href="#"><h4>Another Topic</h4></a>
            </div>
        </div>
    </div>
</div>
</div>

<div class="row">
<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default col-md-4">
        <div class="panel-heading zoonotic" role="tab" id="headingFour">
            <a role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
                <h2>Zoonotic Diseases</h2>
            </a>
        </div>
        <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
            <div class="panel-body">
                <a href="#"><h4>Bacterial</h4></a>
                <a href="#"><h4>Fungal</h4></a>
                <a href="#"><h4>Parasitic</h4></a>
                <a href="#"><h4>Prionotic</h4></a>
                <a href="#"><h4>Rickettsial</h4></a>
                <a href="#"><h4>Spirochetes</h4></a>
                <a href="#"><h4>Viral</h4></a>
            </div>
        </div>
    </div>


    <div class="panel panel-default col-md-4">
        <div class="panel-heading allergies" role="tab" id="headingFive">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                <h2>Allergies</h2>
            </a>
        </div>
        <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
            <div class="panel-body">
                <a href="#"><h4>Animal Allergies</h4></a>
                <a href="#"><h4>Environmental Allergies</h4></a>
            </div>
        </div>
    </div>


    <div class="panel panel-default col-md-4">
        <div class="panel-heading environment-health" role="tab" id="headingSix">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
                <h2>Environmental Health</h2>
            </a>
        </div>
        <div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
            <div class="panel-body">
                <a href="#"><h4>This is a Topic</h4></a>
                <a href="#"><h4>Topic 2</h4></a>
                <a href="#"><h4>Another Topic</h4></a>
            </div>
        </div>
    </div>


</div><!--/collapse-->
</div>
</div>

Answer 1

要拥有多个 Accordion ，但同时只打开一个，您只需组合data-parent。所以我做了一个codepen让你看到它的工作原理。

我刚刚将所有 data-parent 更改为 data-parent="#accordion,#accordion2"

    <div class="row">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

    <div class="panel panel-default col-md-4">
        <div class="panel-heading  bites-stings" role="tab" id="headingSeven">
            <a role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                <h2>Bites and Stings</h2>
            </a>
        </div>
        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                <a href="health-resources/mosquitoes.html"><h4>Mosquitoes</h4></a>
                <a href="health-resources/ticks.html"><h4>Ticks</h4></a>
                <a href="#"><h4>Bees and Wasps</h4></a>
                <a href="#"><h4>Animal Bites</h4></a>
            </div>
        </div>
    </div>


    <div class="panel panel-default col-md-4">
        <div class="panel-heading pet-health" role="tab" id="headingTwo">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                <h2>Pet Health and Safety</h2>
            </a>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">
                <a href="#"><h4>Pet Allergies</h4></a>
                <a href="#"><h4>Toxic Plants</h4></a>
                <a href="#"><h4>Pet and Wildlife Encounters</h4></a>
            </div>
        </div>
    </div>


    <div class="panel panel-default col-md-4">
        <div class="panel-heading livestock-health" role="tab" id="headingThree">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                <h2>Livestock Health and Safety</h2>
            </a>
        </div>
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="panel-body">
                <a href="#"><h4>This is a Topic</h4></a>
                <a href="#"><h4>Topic 2</h4></a>
                <a href="#"><h4>Another Topic</h4></a>
            </div>
        </div>
    </div>
</div>
</div>

<div class="row">
<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default col-md-4">
        <div class="panel-heading zoonotic" role="tab" id="headingFour">
            <a role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
                <h2>Zoonotic Diseases</h2>
            </a>
        </div>
        <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
            <div class="panel-body">
                <a href="#"><h4>Bacterial</h4></a>
                <a href="#"><h4>Fungal</h4></a>
                <a href="#"><h4>Parasitic</h4></a>
                <a href="#"><h4>Prionotic</h4></a>
                <a href="#"><h4>Rickettsial</h4></a>
                <a href="#"><h4>Spirochetes</h4></a>
                <a href="#"><h4>Viral</h4></a>
            </div>
        </div>
    </div>


    <div class="panel panel-default col-md-4">
        <div class="panel-heading allergies" role="tab" id="headingFive">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                <h2>Allergies</h2>
            </a>
        </div>
        <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
            <div class="panel-body">
                <a href="#"><h4>Animal Allergies</h4></a>
                <a href="#"><h4>Environmental Allergies</h4></a>
            </div>
        </div>
    </div>


    <div class="panel panel-default col-md-4">
        <div class="panel-heading environment-health" role="tab" id="headingSix">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
                <h2>Environmental Health</h2>
            </a>
        </div>
        <div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
            <div class="panel-body">
                <a href="#"><h4>This is a Topic</h4></a>
                <a href="#"><h4>Topic 2</h4></a>
                <a href="#"><h4>Another Topic</h4></a>
            </div>
        </div>
    </div>


</div><!--/collapse-->

</div>