Fogbugz（Ocelot架构）自定义JQuery失效问题求助

问题背景 #

Fogbugz更新至Ocelot页面生成机制后，原有自定义JQuery代码完全失效。原代码实现以下功能：

• 自动折叠以__开头的代码块，仅显示部分内容
• 支持双击代码块切换展开/折叠状态
• 移除行内代码片段开头的__前缀

当前限制：无法修改HTML结构、无法添加DOM元素，仅能操作CSS，尝试重写JQuery甚至添加单个元素均无法在DOM中生效。

原代码参考 #

原JQuery代码 #

$("div.codesnippet").each(function() {
    try {
        //collapse if code block starts with two leading underscores    
        var codeblock = $(this).find("pre.prettyprint");    
        var txt = codeblock.text();
        if(Left(txt,2)=="__") {
            $(this).addClass("collapsed");
            var firstspan = $($(codeblock).find("span")[0]);
            $(firstspan).text($(firstspan).text().replace("__",""));    
        }
    } catch (err) {
        //alert("div.codesnippet: " + err.message);   
    }
});
$("code.inline-codesnippet").each(function() {
    try {
        var span = $($(this).find("span")[0]);        
        var txt = span.html();
        if (typeof txt === "undefined"){return;}
        
        if(Left(txt,3)=="__ ") {
            span.html(' ' + Mid(txt,4));
        } else if (Left(txt,2)=="__") {
            span.html(Mid(txt,3));
        }            
    } catch (err) {
        //alert("error inline-codesnippet: " + err.message);
        //alert("span contents: " + txt);
    }
});
$("div.codesnippet").attr("title", "Double-click to collapse/expand");
$("div.codesnippet").dblclick(function() {
    $(this).toggleClass("collapsed");
});

原CSS代码 #

div.codesnippet.collapsed {
  height: 20px;
  background-color: #DDD;
  overflow: hidden !important;
  cursor: default;
}
.bugevent code.inline-codesnippet {
  padding-left: 33px;
}

纯CSS解决方案 #

由于无法操作DOM和JS，只能通过CSS实现核心功能，以下方案兼容现有结构：

1. 核心样式实现 #

/* 代码块基础折叠样式，默认折叠 */
div.codesnippet {
  max-height: 20px;
  overflow: hidden;
  cursor: pointer;
  background-color: #DDD;
  transition: max-height 0.2s ease;
  outline: none;
}

/* 点击后展开（利用focus-within，点击代码块内任意元素触发） */
div.codesnippet:focus-within {
  max-height: 1000px; /* 设为足够大的值覆盖所有代码块高度 */
  background-color: transparent;
}

/* 隐藏代码块开头的__前缀 */
div.codesnippet pre.prettyprint span:first-child {
  text-indent: -1.2em; /* 调整值刚好隐藏两个下划线 */
  padding-left: 1.2em;
}

/* 行内代码处理__前缀 */
code.inline-codesnippet span:first-child {
  text-indent: -1.2em;
  padding-left: 1.2em;
}

/* 行内代码带空格的__ 前缀处理 */
code.inline-codesnippet span:first-child:contains("__ ") {
  text-indent: -1.8em;
  padding-left: 1.8em;
}

/* 保留原行内代码的左侧padding */
.bugevent code.inline-codesnippet {
  padding-left: 33px;
}

2. 触发逻辑说明 #

• 纯CSS无法监听双击事件，改用点击触发展开/折叠：点击代码块内任意区域即可展开，点击页面其他区域自动折叠
• 若需要悬停展开/折叠，可将上述样式中的:focus-within替换为:hover

兼容性说明 #

• :focus-within支持Chrome、Firefox、Edge等现代浏览器
• :contains()属于CSS4选择器，若浏览器不支持，可统一使用-1.2em的缩进，或根据实际文本调整padding值

内容的提问来源于stack exchange，提问作者eranner