Question

我正在设计一个WP网站，但我对谷歌的正确用语感到茫然。我正在寻找的是一个“可以切换的文本容器”。我有一个语法突出显示用于发布代码的插件，但我不希望代码在大块中可见，因为它可能有点分散注意力。我想知道是否有人可以将我链接到插件或给我我正在考虑的技术术语，在那里你可以将文本放在一个组中，然后能够切换它是否在页面内可见。

Answer 1

听起来你正在寻找的只是将CSS类应用于元素，然后使用jQuery或其他一些JS库来切换其可见性。下面的例子（为了解释一些概念，代码没有被优化。这可以，阅读“应该”，清理）：

// This is HTML/CSS
<body>
...
<p>Here is some normal text.</p>
<a href="#" id="source_code_displayText_method_toggle_link">Show/hide source code for displayText method</a>
<div class="source_code" id="source_code_for_displayText_method">
     // Groovy code
     ...
     public void displayText(String message) {
         outputStream.write(message)
     }
     ...
</div>
...
<a href="#" id="source_code_download_method_toggle_link">Show/hide source code for download method</a>
<div class="source_code" id="source_code_for_download_method">
     // Groovy code
     ...
     GParsPool.withPool(threads) {
            sessionDownloadedFiles = localUrlQueue.collectParallel { URL url ->
                downloadFileFromURL(url)
            }
        }
     ...
</div>
...
<a href="#" id="source_code_all_toggle_link">Show/hide all source code sections</a>
...
</body>

您可以将所有源代码部分默认为隐藏：

// This is CSS
.source_code {
  display: hidden;
}

然后你会使用JS来提供toggle能力：

// This is JavaScript

// This toggles a specific section by using an id ("#") selector
$('#source_code_displayText_method_toggle_link').onClick(function() {
  $('#source_code_for_displayText_method').toggle();
});

// This toggles all source code sections by using a class (".") selector
$('#source_code_all_toggle_link').onClick(function() {
  $('.source_code').toggle();
});

一些想法：

如果您切换所有部分，则需要确定当前状态是什么 - 如果某些部分当前显示而其他部分隐藏，则会反转每个部分。如果您想要“全部隐藏”和“全部显示”，请分别使用.hide()和.show()。
如果您手动添加源代码部分并且需要语义选择器，则上述情况很好。如果您正在构建某种自动化/工具以允许您重复此操作，您可能希望使用生成的ID和帮助程序链接，在这种情况下它看起来像：

// This is HTML/CSS
<body>
...
<p>Here is some normal text.</p>
<a href="#" class="source_code_toggle_link" id="source_code_toggle_link_1">Show/hide source code for displayText method</a>
<div class="source_code" id="source_code_1">
     // Groovy code
     ...
     public void displayText(String message) {
         outputStream.write(message)
     }
     ...
</div>
...
<a href="#" class="source_code_toggle_link" id="source_code_toggle_link_2">Show/hide source code for download method</a>
<div class="source_code" id="source_code_2">
     // Groovy code
     ...
     GParsPool.withPool(threads) {
            sessionDownloadedFiles = localUrlQueue.collectParallel { URL url ->
                downloadFileFromURL(url)
            }
        }
     ...
</div>
...
<a href="#" id="source_code_all_toggle_link">Show/hide all source code sections</a>
...
</body>

使用JavaScript来处理id解析：

// This is JavaScript

// This toggles a specific section by using a dynamic id ("#") selector
$('.source_code_toggle_link').onClick(function(elem) {
  var id = $(elem).attr("id");
  // Split on the _ and take the last element in the resulting array
  var idNumber = id.split("_")[-1];
  var codeBlock = $('#source_code_' + idNumber);
  codeBlock.toggle();
});

Wordpress技术术语

1 个答案: