实现嵌套的手风琴

Question

我遇到嵌套式手风琴的问题 - 每当我点击子元素时，父手风琴就会关闭....

我正在使用此HTML：

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<ul class="collapsible" data-collapsible="accordion">
    <li>
        <div class="collapsible-header">
            <i class="material-icons">filter_drama</i>First</div>
        <div class="collapsible-body">
            <div class="row">
                <div class="col s12 m12">
                    <ul class="collapsible" data-collapsible="accordion">
                        <li>
                            <div class="collapsible-header">
                                <i class="material-icons">filter_drama</i>Nested First</div>
                            <div class="collapsible-body">
                                <p>Lorem ipsum dolor sit amet.</p>
                            </div>
                        </li>
                        <li>
                            <div class="collapsible-header">
                                <i class="material-icons">place</i>Nested Second</div>
                            <div class="collapsible-body">
                                <p>Lorem ipsum dolor sit amet.</p>
                            </div>
                        </li>
                        <li>
                            <div class="collapsible-header">
                                <i class="material-icons">whatshot</i>Nested Third</div>
                            <div class="collapsible-body">
                                <p>Lorem ipsum dolor sit amet.</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </li>
    <li>
        <div class="collapsible-header">
            <i class="material-icons">place</i>Second</div>
        <div class="collapsible-body">
            <div class="container">
                <ul class="collapsible" data-collapsible="accordion">
                    <li>
                        <div class="collapsible-header">
                            <i class="material-icons">filter_drama</i>Nested First</div>
                        <div class="collapsible-body">
                            <p>Lorem ipsum dolor sit amet.</p>
                        </div>
                    </li>
                    <li>
                        <div class="collapsible-header">
                            <i class="material-icons">place</i>Nested Second</div>
                        <div class="collapsible-body">
                            <p>Lorem ipsum dolor sit amet.</p>
                        </div>
                    </li>
                    <li>
                        <div class="collapsible-header">
                            <i class="material-icons">whatshot</i>Nested Third</div>
                        <div class="collapsible-body">
                            <p>Lorem ipsum dolor sit amet.</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </li>
    <li>
        <div class="collapsible-header">
            <i class="material-icons">whatshot</i>Third</div>
        <div class="collapsible-body">
            <div class="container">
                <div class="row">
                    <div class="col s12 m12">
                        <ul class="collapsible" data-collapsible="accordion">
                            <li>
                                <div class="collapsible-header">
                                    <i class="material-icons">filter_drama</i>Nested First</div>
                                <div class="collapsible-body">
                                    <p>Lorem ipsum dolor sit amet.</p>
                                </div>
                            </li>
                            <li>
                                <div class="collapsible-header">
                                    <i class="material-icons">place</i>Nested Second</div>
                                <div class="collapsible-body">
                                    <p>Lorem ipsum dolor sit amet.</p>
                                </div>
                            </li>
                            <li>
                                <div class="collapsible-header">
                                    <i class="material-icons">whatshot</i>Nested Third</div>
                                <div class="collapsible-body">
                                    <p>Lorem ipsum dolor sit amet.</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </li>
    <li>
        <div class="collapsible-header">
            <i class="material-icons">filter_drama</i>Fourth</div>
        <div class="collapsible-body">
            <div style="padding:25px">
                <ul class="collapsible" data-collapsible="accordion">
                    <li>
                        <div class="collapsible-header">
                            <i class="material-icons">filter_drama</i>Nested First</div>
                        <div class="collapsible-body">
                            <p>Lorem ipsum dolor sit amet.</p>
                        </div>
                    </li>
                    <li>
                        <div class="collapsible-header">
                            <i class="material-icons">place</i>Nested Second</div>
                        <div class="collapsible-body">
                            <p>Lorem ipsum dolor sit amet.</p>
                        </div>
                    </li>
                    <li>
                        <div class="collapsible-header">
                            <i class="material-icons">whatshot</i>Nested Third</div>
                        <div class="collapsible-body">
                            <p>Lorem ipsum dolor sit amet.</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

我无法弄清楚导致它发生的原因......

当我初次使用手风琴时： $('.collapsible').collapsible(); 我将onOpen和onClose回调设置为警告＆＃34;打开＆＃34;或者＆＃34;关闭＆＃34;。

当点击一个子元素时，它似乎警告打开，但随后警报关闭，以便它触发孩子，但立即关闭整个手风琴。

任何帮助或提示都会有很多指定

Answer 1

只需将嵌套可折叠对象更改为id，然后调用另一个函数（“ #newid”）。collapsible（）