Question

我有手风琴。它是在下面的小提琴中给出的。 http://fiddle.jshell.net/7vRV9/

在这种情况下，当我单击一个元素组时，它将打开，然后单击元素组2.它也将打开。但是我的要求是当一个人打开时，所有其他人都应该关闭，如果我有几个（现在只有两个）。如何实施这个？

Answer 1

我希望这对你有用。只需用您的JSFIDDLE HTML替换下面的HTML代码段即可。它将开始工作。如果您有任何疑问，请随时询问。

<div class="accordion" id="food-category">
<div class="accordion-group">
    <div class="accordion-heading">
        <div class="accordion-toggle" data-toggle="collapse" data-parent="#food-category" href="#indian">Indian Food</div>
    </div>
    <div class="accordion-body collapse" id="indian">
        <ul>
            <li> Food 1</li>
            <li> Food 2</li>
            <li> Food 3</li>
        </ul>
    </div>
</div>
<div class="accordion-group">
    <div class="accordion-heading">
        <div class="accordion-toggle" data-toggle="collapse" data-parent="#food-category" href="#sea">Sea Food</div>
    </div>
    <div class="accordion-body collapse" id="sea">
        <ul>
            <li> Food 1</li>
            <li> Food 2</li>
            <li> Food 3</li>
        </ul>
    </div>
</div>
<div class="accordion-group">
    <div class="accordion-heading">
        <div class="accordion-toggle" data-toggle="collapse" data-parent="#food-category" href="#chinese">chinese Food</div>
    </div>
    <div class="accordion-body collapse" id="chinese">
        <ul>
            <li> Food 1</li>
            <li> Food 2</li>
            <li> Food 3</li>
        </ul>
    </div>
</div>
</div>

Answer 2

我修改了您的代码并进行了以下更改： -

可能 id =“accordion1”正在创建一些问题，因此我使用 customTab 重命名此ID并分别替换
已添加＆lt; div class =“accordion-group”＆gt; 以获得更好的用户界面

请测试一下。如果您需要进一步的帮助，请更新我。

此外，您可以在JSfiddle中复制并粘贴以下代码段并对其进行测试： -

<div class="accordion " id="customTab">
        <div class="accordion-group">
            <!-- Element Group Heading -->
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#customTab" href="#collapse1"> 
                <b>Element Group 1</b>
                </a>
            </div>
            <!-- Elements -->
            <div id="collapse1" class="accordion-body collapse">
               <!--  -->
                    <div class="accordion" id="accordion1-1">
                        <div class="accordion-heading" style="margin-left: 30px">
                            <label class="radio" class="accordion-toggle" data-toggle="collapse"    data-parent="#accordion1-1" data-target="#collapseOne1-1">
                            <input type="radio" name="optionsCheckboxList" value="1"/>Element One
                            </label>
                        </div>
                        <div id="collapseOne1-1" class="accordion-body collapse">
                        <div class="accordion-inner" style="margin-left: 60px">

                        <!-- Sample Description -->
                        <input type="radio" name="selComment" value="descName" onclick="populateComment(this.value)"/>${desc1.name}<br/>
                        </div></div>
                    </div>
                    <!--  -->
                    <div class="accordion" id="accordion1-2">
                        <div class="accordion-heading" style="margin-left: 30px">
                            <label class="radio" class="accordion-toggle" data-toggle="collapse"    data-parent="#accordion1-2" data-target="#collapseOne1-2">
                            <input type="radio" name="optionsCheckboxList" value="2"/>Element Two
                            </label>
                        </div>
                        <div id="collapseOne1-2" class="accordion-body collapse">
                        <div class="accordion-inner" style="margin-left: 60px">

                        <!-- Sample Description -->
                        <input type="radio" name="selComment" value="descName" onclick="populateComment(this.value)"/>${desc1.name}<br/>
                        </div></div>
                    </div>
                    <!--  -->
            </div>
        </div>

        <div class="accordion-group">
            <!-- Element Group Heading -->
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#customTab" href="#collapse2"> 
                <b>Element Group 2</b>
                </a>
            </div>
            <!-- Elements -->
            <div id="collapse2" class="accordion-body collapse">
               <!--  -->
                    <div class="accordion" id="accordion2-1">
                        <div class="accordion-heading" style="margin-left: 30px">
                            <label class="radio" class="accordion-toggle" data-toggle="collapse"    data-parent="#accordion2-1" data-target="#collapseOne2-1">
                            <input type="radio" name="optionsCheckboxList" value="1"/>Element One
                            </label>
                        </div>
                        <div id="collapseOne2-1" class="accordion-body collapse">
                        <div class="accordion-inner" style="margin-left: 60px">

                        <!-- Sample Description -->
                        <input type="radio" name="selComment" value="descName" onclick="populateComment(this.value)"/>${desc1.name}<br/>
                        </div></div>
                    </div>
                    <!--  -->
                    <div class="accordion" id="accordion2-2">
                        <div class="accordion-heading" style="margin-left: 30px">
                            <label class="radio" class="accordion-toggle" data-toggle="collapse"    data-parent="#accordion2-2" data-target="#collapseOne2-2">
                            <input type="radio" name="optionsCheckboxList" value="2"/>Element Two
                            </label>
                        </div>
                        <div id="collapseOne2-2" class="accordion-body collapse">
                        <div class="accordion-inner" style="margin-left: 60px">

                        <!-- Sample Description -->
                        <input type="radio" name="selComment" value="descName" onclick="populateComment(this.value)"/>${desc1.name}<br/>
                        </div></div>
                    </div>
                    <!--  -->
            </div>
        </div>
</div>

如何在另一个打开时关闭手风琴？

2 个答案: