Question

请帮助我：

我的页面顶部有四个缩略图，当点击它们时，帖子的内容会切换下来。问题是它们叠加在一起。

我需要它们一次显示一个。单击其中一个时，它会向下切换，当单击另一个时，“活动”一个滑动，然后单击一个。

这是代码：

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

Answer 1

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

该页面上有一个简单的代码示例（您需要重新组织一些HTML标记才能使其正常工作）并且您可以在{{3上看到高级选项（定义'标题'等） }}

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

编辑：重新阅读您的帖子我意识到您可能不想要手风琴而是选项卡（因此您在顶部彼此相邻有4个拇指，其下方的内容区域由当前选择的任何缩略图）。在这种情况下，您需要查看API documentation，这也很容易实现（jQuery UI Tabs widget）。

Answer 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(); ?>">

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

2 个答案: