Wordpress - 使用 jQuery 切换 wp_query 循环中的隐藏文本答案

【问题标题】：Wordpress - using jQuery to toggle hidden text that's in a wp_query loopWordpress - 使用 jQuery 切换 wp_query 循环中的隐藏文本
【发布时间】：2013-07-09 12:42:38
【问题描述】：

请帮帮我：

我的页面顶部有四个缩略图，当点击它们时，帖子的内容会向下切换。问题是它们相互堆叠。

我需要它们一次显示一个。单击一个时，它会向下切换，单击另一个时，“活动”的一个会滑开并出现单击的那个。

代码如下：

<script type="text/javascript">
  function toggleDiv(divId) {
   $("#"+divId).slideToggle('hidden');
  }
</script>

HTML

<div id="news-bar">
    <?php query_posts('cat=10'); ?>

    <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

        <ul class="news-feed">
            <li>
                <a class="shadow" href="javascript:toggleDiv('post-<?php the_ID(); ?>');">
                    <?php
                        if ( has_post_thumbnail() ) {
                        // the current post has a thumbnail
                        the_post_thumbnail();
                      echo '<div class="image-caption">' .get_post(get_post_thumbnail_id())->post_excerpt. '</div>';
                        } else {
                        // the current post lacks a thumbnail
                        }
                    ?>
                </a>
                </li>
        </ul>

            <div class="myContent" id="post-<?php the_ID(); ?>">            
                    <h2><a href="<?php // the_permalink(); ?>"> <?php // the_title(); ?></a></h2>
                    <p><?php the_content(); ?></p> 
            </div>
    <?php endwhile; ?> <?php wp_reset_query(); ?>
</div>  >

【问题讨论】：

标签： jquery wordpress toggle

【解决方案1】：

最简单的方法是使用 JQuery UI 的内置 accordion feature。您应该能够从链接页面上的示例中看到如何做到这一点。基本上，在您的内容包装器上调用 .accordion()，然后它会查找标题集（可以是任何标题，在您的情况下为 <a class="shadow"> 缩略图），然后展开/折叠它们之后的 div。

该页面上有一个简单的代码示例（您需要重新组织 HTML 标记以使其正常工作），您可以在 API documentation 上查看高级选项（定义“标题”等） .

JQuery UI 是一个扩展 jQuery 的附加库，因此您需要在 jQuery 核心脚本调用之后在标题中包含脚本调用。

编辑：重读您的帖子我意识到您可能不想要手风琴，而是想要标签（因此您在顶部有 4 个彼此相邻的拇指，下方的内容区域由当前选择的任何缩略图）。在这种情况下，您将需要查看 jQuery UI Tabs widget，它的实现也非常简单 (documentation here)。

【讨论】：

【解决方案2】：

确保在显示点击的那个之前隐藏所有这些。也许尝试这样的事情：

function toggleDiv(divId) {
    $('#news-bar .myContent:not(#' + divId + ')').slideUp();
    $("#"+divId).slideToggle();
}

不确定hidden 在 slideToggle 中做什么，它唯一可以是速度（隐藏是速度）。如果你想添加一个hidden 的类，你可以这样做：

$('#'+divId).slideToggle().toggleClass('hidden');

此外，您可能希望将 style="display: none" 添加到 div 以在页面加载时隐藏它们。像这样：

<div class="myContent" style="display: none" id="post-<?php the_ID(); ?>">

【讨论】：