修改现有脚本collapsible-list

Question

夜。

我正在查看此剧本 collapsible-list ，并希望有人可以帮我修改一下。

此页面上有一个实时演示： HERE ，我创建了一个JFiddle HERE

目前，当页面加载时，所有部分都已完全展开，是否有任何方法可以在脚本折叠的情况下启动脚本？

无论如何只能一次显示一个扩展部分吗？即：如果显示A并且我点击B，那么B应该打开，A应该关闭。

如何在条目周围添加边框？因此，当关闭时，没有任何内容只显示标题，但是当展开时，正确的部分周围会显示一个2px边框？

到目前为止，我已设法通过添加以下内容来加载标题：

allElements.hide();

致：

        function init() {
            allElements = mainUl.find('> ul > li, ol > li');
            headers = getHeaders();

            allElements.hide();

            setHeadersClickHandler();
            setApi();
            if (options.search !== false) {
                setSearchField();
            }
        }

这可以工作但是要扩展标题部分我必须双击它，而不是单个..只需单击一下就能做到这一点吗？

我试图通过添加以下内容一次只显示一个标题部分：

var elem = $(this).next('.header')
$('.header').not(elem).hide();

致：

function expandHeader(header) {
return showListElements(findHeadersList(header).find('> li'))
.done(function() {
header.removeClass('collapsed');
var elem = $(this).next('.header')
$('.header').not(elem).hide();
});
}

但是这只是在点击一个时删除了所有标题！

我不确定在展开时如何将边框添加到UL。我希望它看起来像这样：

我希望有人可以帮助我。 非常感谢

**更新**

当UL使用扩展和折叠时，我已经出现并隐藏边框：

    function collapseHeader(header) {
        return hideListElements(findHeadersList(header).find('> li'))
            .done(function() {
                 $(this).parent().css({"border-width":"0px"});
                header.addClass('collapsed');
            });
    }

    function expandHeader(header) {
        return showListElements(findHeadersList(header).find('> li'))
            .done(function() {
                $(this).parent().css({"border-width":"2px"});
                header.removeClass('collapsed');
            });
    }

然而，当我搜索某个部分不包含匹配项时，UL已关闭，但边框仍然可见。不管怎么说？