javascript - jQuery可在 Accordion 中选择

我正在遵循Mikes.Netting提供的jQuery手风琴示例以及jQuery-UI提供的所有Selectable等示例。

目前，手风琴可以使用（请参见下面的代码），但是我只能在第一手风琴部分中选择子项。如果将<ul id="selectable">位移到<div id="accordion">的正下方，那么我可以选择所有内容，但手风琴部分始终处于展开状态且无法折叠。

这是我在asp.net网页（剃刀）网站上使用的脚本和代码。

<script>
    $(function () {
        $("#selectable").selectable();
    });
 </script>
 <script>
        $(function () {
            $("#accordion").accordion({ heightStyle: "content", collapsible: true, active: false });
        });
 </script>

 <div id="accordion">
                @foreach (var parent in keyParents) {
                    <h3><a href="#">@parent.Key</a></h3>
                    <div>
                        <ul id="selectable">
                            <li class="ui-widget-content">
                                <div><b>@parent.Key</b></div>
                            </li>
                            @foreach (var child in parent.OrderBy(p => p.KeywordChildName))
                            {
                                <li class="ui-widget-content">
                                    <div>@child.KeywordChildName</div>
                                </li>
                            }
                        </ul>
                    </div>
                }
            </div>

我还应该提到，这一切都位于jQuery（标签）中。使手风琴在选项卡中起作用的解决方法是，尽管手风琴位于选项卡中，但只是在选项卡脚本上方列出手风琴脚本。希望对此当前问题有一个类似的简单修复。最后，我希望能够仅选择父元素，而未选择子项。目前，我只是在子元素上方第二次列出了父元素。

最佳答案

您正在遍历ID定位的元素。将#selectable更改为.selectable作为.selectable()的目标，并更新相应的HTML：<ul class="selectable">。

ID必须是唯一的，因此迭代会产生ID的倍数。