Question

我正在使用bootstrap手风琴，我使用嵌套式手风琴。

我现在要做的就是关闭所有儿童手风琴容器。

所以，如果我们关闭父母，它需要关闭所有儿童手风琴，包括身体手风琴的内容。

在此jsFiddle示例中，如果执行以下操作：

点击“HeilbehandlungfürMenschund Tier”
打开“SchamanischeArbeitenfürMenschen”
再次点击“HeilbehandlungfürMenschund Tier”
再次打开“HeilbehandlungfürMenschund Tier”

你会看到“SchamanischeArbeitenfürMenschen”被打开，因为我们在第2步打开了它。我希望它也在第3步关闭。

我希望你明白我想要达到的目标。

以下是提供的源代码：

<div class="panel-group uk-row-first" id="accordion-neuweltenbreucken">
    <div class="uk-width-medium-1-1">

        <article class="uk-article" id="accordion" data-permalink="http://neu.weltenbruecken.com/16-accordeon/36-heilbehandlung-fur-mensch-und-tier">
            <div>

                <div class="panel panel-default">
                    <div class="panel-heading main">
                        <h4 class="panel-title"><a href="#collapse2" class="panel-toggle collapsed" data-parent="#accordion-neuweltenbreucken"  data-body-background="background2.jpg" data-toggle="collapse"> Heilbehandlung für Mensch und Tier </a></h4>
                    </div>
                    <div id="collapse2" class="panel-body collapse">
                        <div class="panel-inner main">
                            <!-- Here we insert another nested accordion -->
                            <div id="accordion4" class="panel-group">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title"><a href="#collapse2Inner1" class="panel-toggle" data-toggle="collapse" data-parent="#accordion4"> Schamanische Arbeiten für Menschen </a></h4>
                                    </div>
                                    <div id="collapse2Inner1" class="panel-body collapse">
                                        <p>Vorbereitungsarbeiten Fr. 75 / h , Heilarbeiten Fr. 135 / h, Nacharbeit, Dokumentation Fr. 75 / h</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title"><a href="#collapse2Inner2" class="panel-toggle" data-toggle="collapse" data-parent="#accordion4"> Schamanische und telepathische Arbeit für Tiere </a></h4>
                                    </div>
                                    <div id="collapse2Inner2" class="panel-body collapse">
                                        <div class="panel-inner">
                                            <h5>Telepathische Kommunikation</h5>
                                    </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Inner accordion ends here -->
                        </div>
                    </div>
                </div>


        </article>
    </div>

Answer 1

您可以在此处查看代码https://jsfiddle.net/nidhi_sh/ot4m9q2u/1/

$(document).ready(function(){
    $("#acc2").click(function(){
    var n=2; //total number of inner div in accordion
    for(i=1;i<=n;i++)
    {
       if($("#collapse2Inner"+i).hasClass("in"))
       {
            $("#acc2inner"+i).click(); //Click on link of each accordion to close it
       }
    }    
    });
});

if条件是检测手风琴中的内部div是否有效。一种方法是检查分配给内部div的当前类。当div打开时，它被标记为in，当div关闭时，它被标记为collapse。一旦您知道div已打开，只需单击其对应的href元素即可将其关闭。

for循环用于确保在您点击父手风琴的href元素时折叠内手风琴中的所有div元素。

为此，我已将id分配给代码中的href元素。

Answer 2

谢谢Nidhi。

我会接受你的回答，因为你告诉我如何实现这个目标。

我没有改变DOM结构（更改html）。

此解决方案适用于任何数量的手风琴儿童。

  closeChildrenAccordion : function (accordion) {
            if (jQuery(".accordion-open")) {
                jQuery(".accordion-open").unbind().click(function () {
                    jQuery(accordion).removeClass('accordion-open');
                    var parentPanelHeading = jQuery(this).closest('.panel-heading'); // Get parent
                    var siblings           = parentPanelHeading.siblings()[0]; // Get div that needs to be closed when closing parent div

                    if(jQuery(siblings).hasClass("in"))
                    {
                        jQuery(siblings).find('a').each(function (index, element) {
                            if(jQuery(element).hasClass('active'))
                                element.click();
                        });
                    }


                });


            }
        }

关闭家长手风琴需要关闭所有儿童手风琴

2 个答案: