小工具之导出谷歌浏览器书签界面美化方法步骤（360浏览器等其他浏览器书签也适用）

起因：导出书签后，在浏览器中浏览效果体验极差。像下面这样。没有缩进，没有收缩，太乱。

步骤1：代码在下面，先复制，然后粘贴到页面的title标签的下方。

<style type="text/css">
    dl{margin-left: 20px;border-left: 1px solid #dddddd}
    .hidden {display: none;}
    .isYinCang{background-color:  #c7ecf6}
    dt{cursor: pointer;}
</style>
<script type="text/javascript">
    // 等待DOM加载完成
        document.addEventListener('DOMContentLoaded', function() {
            // 获取所有dt元素
            //alert('a')
            document.querySelectorAll('dt').forEach(dt => {
                // 为每个dt添加点击事件
                dt.addEventListener('click', function(e) {
                    /*// 获取紧邻的下一个元素
                    const nextElement = this.nextElementSibling;
                    console.log(this)
                    console.log(nextElement)
                    // 检查是否是dl元素
                    if (nextElement && nextElement.tagName === 'DL') {
                        // 切换隐藏/显示类
                        nextElement.classList.toggle('hidden');
                    }*/
                    // 精确选择直接子级dl（使用>选择器）
                    const childDl = this.querySelector(' dl');
                    console.log(this)
                    console.log(childDl)
                    this.classList.toggle('isYinCang');
                    if (childDl) {
                        // 只在找到直接子级dl时执行切换
                        childDl.classList.toggle('hidden');
                        
                        // 阻止事件冒泡（避免触发父级dt的点击事件）
                        e.stopPropagation();
                    }
                });
            });
            window.setTimeout(function(){
                
            },1000);
            
        });
</script>

粘贴位置如下图所示

步骤2：保存，浏览器打开后就变好看了，不仅有缩进线，还有收缩功能，再搭配浏览器自带的搜索功能（ctrl+F），完美؏؏☝ᖗ乛◡乛ᖘ☝؏؏

末尾：最终效果如下图。蓝色表示已经收缩，线条表示缩进。