jquery - CSS 阻止折叠我的 DIV

Question

我有 Jquery，当您单击 h3 标签时，它会隐藏该 div。我遇到的问题是 white-space:pre 阻止我折叠 div。我一直在疯狂地想办法，但我找不到解决方案。

这是我的 HTML 代码:

<!-- first file -->
      <div class="file_wrapper">
        <h2>Previous Version of Pre.report.txt</h2>
        <div class="file_inner">
        <ol class="ol_counter">
<div  style="width: 100%" class="block1"><h3> Result </h3>
<li>++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</li>
<li></li>
<li>##############################################################################</li>
<li># Test 1. </li>
<li># Test 2. </li>
<li># Test 3. </li>
<li># Test 4. </li>
<li># Test 5. </li>
<li>##############################################################################</li>
            </div>
<div  style="width: 100%" class="block2"><h3> Result </h3>
<li>+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</li>
<li></li>
<li>##############################################################################</li>
<li># Test 1. </li>
<li># Test 2. </li>
<li># Test 3. </li>
<li># Test 4. </li>
<li># Test 5. </li>
<li>##############################################################################</li>
            </div>
<div  style="width: 100%" class="block3"><h3> Result </h3>
<li>++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</li>
<li></li>
<li>##############################################################################</li>
<li># Test 1. </li>
<li># Test 2. </li>
<li># Test 3. </li>
<li># Test 4. </li>
<li># Test 5. </li>
<li>##############################################################################</li>
            </div>                </div>                                                                                                    
              </div>
              </div>

问题出在 .file_wrapper {white-space: pre;}

如果我删除它，文本将不会保留格式。

我想要这样的东西: demo

这是我的代码:demo 2

在此先感谢您，让您知道我是 CSS 或 HTML 专家。我只是将 perl 脚本输出格式化为在 html 上看起来不错。

Answer 1

如果您必须保持 html 不变，这里有一个 css 解决方案应该适合您的需要。

我修改了你的 fiddle :

1. 在 .file_wraper 上删除了 white-space: pre;
2. 在 .file_wrapper h2 上将 margin-left 更改为 0
3. 在 li
上设置 margin:0;
4. 在 .file_wrapper h3 上设置 margin: 0 0 0px 30px;

看到这个 FIDDLE