1

晚上。

我正在查看这个脚本可折叠列表，并希望有人可以帮助我稍微修改它。

此页面上有一个现场演示：这里我已经创建了一个 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 已关闭，但边框仍然可见。反正围绕那个？

4

0 回答 0