我有一个Pelican (静态站点生成器)网站,它将pre标签中的代码转换为行号语法彩色表格,我正在尝试为每个生成的代码表添加一个按钮,以便在将表格扩展到完整大小(其中,长行会使其超出容器)和适合容器的大小之间切换。
我拼凑了一些Javascript来做这件事(这不是我的强项),它可以在Chrome上工作,但Firefox不喜欢它(尽管恼人的是没有抛出控制台错误)。
$(document).ready(function() {
// set code boxes up for expanding
var site_width = $('.entry-content').width();
$('table.highlighttable').each(function() {
// store each code block's width in its tabindex for later retrieval
$(this).attr('tabindex', $(this).width());
});
// initially restrict all code blocks to site width (could be CSS really)
$('table.highlighttable').css('width', site_width);
// add button to each code block to expand / collapse
$('.code pre').append('<a href="#" class="code-expand">»</a>');
jQuery(".code-expand").click(function() {
var natural_width = $(this).closest('table.highlighttable').attr('tabindex');
var site_width = $('.entry-content').width();
if($(this).closest('table.highlighttable').width() > site_width) {
// if code is expanded, collapse code
$(this).closest('table.highlighttable').css('width', site_width);
$(this).html('»');
} else {
// if code is collapsed, expand code
$(this).closest('table.highlighttable').css('width', natural_width);
$(this).html('«');
}
return false;
});
});
<div class="entry-content">
<table class="highlighttable">
<tr>
<td class="code">
<div class="highlight"><pre>
stuffstuffstuffstuffstuffstuffstuffstuffstuffstuffstuffstuffstuff
</pre>
</div>
</td>
</tr>
</table>
</div>
.entry-content {
width:300px;
border:1px solid #000;
}
.highlighttable {
table-layout:fixed;
border:1px solid #F00;
}
发布于 2017-06-23 11:32:35
明白了--这甚至不是Javascript的问题,而是CSS。我使用的是Bootstrap,它将表格的最大宽度设置为100%。Chrome似乎很乐意覆盖它,但Firefox不会,除非你在CSS中覆盖max-width。
https://stackoverflow.com/questions/44715936
复制