将嵌套手风琴进行材料化

Question

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

我正在使用此HTML：

<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>

我不知道是什么原因导致了它发生...

当我使用以下方法初始化风琴手时：$('.collapsible').collapsible();我将onOpen和onClose回调设置为警告“打开”或“关闭”。

单击子元素时，它似乎提示打开，但随后警告关闭，因此它触发了孩子，但立即关闭了整个手风琴。

任何帮助或技巧都将不胜感激

Answer 1

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