晚间 .

我正在看这个脚本 collapsible-list ，并希望有人可以帮我修改一下 .

这个页面上有一个现场演示： HERE 我创建了一个JFiddle HERE

目前，当页面加载时，所有部分都已完全展开，有没有办法在它们崩溃的情况下启动脚本？

反正只有一次显示一个扩展部分？即：如果显示A并且我点击B，那么B应该打开并且A应该关闭 .

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

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

allElements.hide();

至 ：

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

            allElements.hide();

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

这工作但是扩展 Headers 部分我必须双击它，而不是单个..任何方式只需单击一次吗？

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

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();
});
}

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

我喜欢这样：
Border

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

更新

随着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已关闭，但边框仍然可见 . 不管怎么说？

jquery list toggle accordion collapsable