0

请在这件事上给予我帮助：

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

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

这是代码：

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

2 回答 2

0

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

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(); ?>">
于 2013-07-09T12:48:17.573 回答
0

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

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

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

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

于 2013-07-09T12:47:54.790 回答