Web Wordpress技术术语_Web_Wordpress

Web Wordpress技术术语

web wordpress

Web Wordpress技术术语,web,wordpress,Web,Wordpress,我正在用WP设计一个网站，但我对谷歌合适的词语感到不知所措。我要找的是一个“可切换的文本容器”。我有一个语法突出显示插件，用于发布代码，但我不希望代码在大的块中可见，因为这可能会有点分散注意力。我想知道是否有人能把我链接到插件或者给我一个我所想的技术术语，您可以将文本放入一个组中，然后可以切换它在页面中是否可见。听起来您要寻找的似乎只是将CSS类应用于元素，然后使用jQuery或其他JS库切换其可见性。下面的示例（为了解释一些概念，代码没有经过优化。可以将其改为“应该”）：然后您将使用JS提供

我正在用WP设计一个网站，但我对谷歌合适的词语感到不知所措。我要找的是一个“可切换的文本容器”。我有一个语法突出显示插件，用于发布代码，但我不希望代码在大的块中可见，因为这可能会有点分散注意力。我想知道是否有人能把我链接到插件或者给我一个我所想的技术术语，您可以将文本放入一个组中，然后可以切换它在页面中是否可见。

听起来您要寻找的似乎只是将CSS类应用于元素，然后使用jQuery或其他JS库切换其可见性。下面的示例（为了解释一些概念，代码没有经过优化。可以将其改为“应该”）：

然后您将使用JS提供以下功能：

一些想法：

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

// 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;
}

// 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();
});

// 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>

// 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();
});