Question

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

目前（见下面的代码）手风琴有效，但我只能在第一个手风琴部分选择儿童用品。如果我将<ul id="selectable">位移到<div id="accordion">下面，那么我可以选择所有内容，但手风琴部分总是会扩展而不是可折叠的。

以下是我在asp.net网页（razor）网站上使用的脚本和代码。

<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（tab）中。让选项卡在选项卡中工作的修复方法是简单地列出选项卡脚本上方的手风琴脚本，尽管手风琴位于选项卡内。希望对当前这个问题有一个类似的简单修复方法。最后，我希望能够只选择没有选择子项的父元素。目前我只是在子元素正上方第二次列出父元素。

Answer 1

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

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

手风琴中的jQuery Selectable

1 个答案: