javascript - 如何使用 javascript 扩展多级 div 并在 url 中保存扩展条件以用于链接共享或手动复制/过去

Question

大家好，所有 JavaScript 专家! 我搜索扩展多级 div 的解决方案，其中包含指向 doc/pdf 文件的链接，可以在扩展条件下复制/粘贴或共享 url 链接。我是 javascript 的新手，不确定它的实现方式。可能类似于“location.hash”和“on hashchange” 这是我用于在我的网站上展开/折叠多级 div 的代码:

$(document).ready(function(){   

$('.lib_element_sign_pos').toggle(function() {
    $(this).css("background-image", "url('/images/-.png')");
    if($(this).parent().parent().attr('class') == "lib_level_1")
        $(this).parent().parent().find('.lib_level_2').slideDown('slow');
    else if($(this).parent().parent().attr('class') == "lib_level_2")
        $(this).parent().parent().find('.lib_level_3').slideDown('slow');
    } , function() { 
    $(this).css("background-image", "url('/images/+.png')");
    if($(this).parent().parent().attr('class') == "lib_level_1")
        $(this).parent().parent().find('.lib_level_2').hide();
    else if($(this).parent().parent().attr('class') == "lib_level_2")
        $(this).parent().parent().find('.lib_level_3').hide();

});

    $('.lib_element_text').toggle(function() {
    $(this).parent().find('.lib_element_sign_pos').css("background-image", "url('/images/-.png')");
    if($(this).parent().parent().attr('class') == "lib_level_1")
        $(this).parent().parent().find('.lib_level_2').slideDown('slow');
    else if($(this).parent().parent().attr('class') == "lib_level_2")
        $(this).parent().parent().find('.lib_level_3').slideDown('slow');
    } , function() { 
    $(this).parent().find('.lib_element_sign_pos').css("background-image", "url('/images/+.png')");
    if($(this).parent().parent().attr('class') == "lib_level_1")
        $(this).parent().parent().find('.lib_level_2').hide();
    else if($(this).parent().parent().attr('class') == "lib_level_2")
        $(this).parent().parent().find('.lib_level_3').hide();

});

    $('.lib_element_about').click(function() {
        if($(this).next().css('display') == 'none')
            $(this).next().slideDown('100000');
        else
            $(this).next().hide();
        $('#lib_area').find('.lib_element_info').hide();
    } , function() { 
});

});

很乐意提供任何帮助。 提前致谢!

Answer 1

是否Jquery toggle - expand / collapse on multiple divs有帮助吗？

此外，这里有一些注意事项:

1) .find() 函数非常昂贵，您应该避免多次调用它。 2)您的代码似乎非常依赖于 DOM 节点的顺序(有很多 .parent().parent() 调用)。如果您曾经更改任何 DOM 节点的子节点的父节点，则必须在很多地方更改此函数。 3) 祝你好运:)