Jquery 修改现有脚本可折叠列表

晚上好

我正在看这个脚本，希望有人能帮我稍微修改一下

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

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

是否一次只能显示一个扩展节？ie：如果显示A，我点击B，那么B应该打开，A应该关闭

如何在条目周围添加边框？所以当关闭时，什么也不显示，只显示标题，但当展开时，在正确的部分周围显示2px边框

到目前为止，我通过添加以下内容，成功地在头文件折叠的情况下加载了它：

allElements.hide();

致：

这是可行的，但要展开标题部分，我必须双击它，而不是单点。。有没有办法只需点击一下

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

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

从这里使用建议解决：

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

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