手风琴内的 jQuery Selectable

Question

我正在关注Mikes.Netting 提供的 jQuery Accordion 示例以及所有 Selectable 等 示例在jQuery-UI。

目前（见下面的代码）手风琴可以工作，但我只能在第一个手风琴部分选择子项。如果我将<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（选项卡）中。使手风琴在选项卡中工作的修复方法是简单地在选项卡脚本上方列出手风琴脚本，尽管手风琴位于选项卡内。希望对于当前的问题有类似的简单修复。最后，我希望能够只选择没有选择子项的父元素。目前我只是在子元素上方第二次列出父元素。

Answer 1

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

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