我正在设计一个网站,其中有一个页面将显示给定特定父类别ID的子类别的帖子。每个帖子的标题将是一个问题,内容将是答案。我想实现的是在单击问题时隐藏/显示答案,或者换句话说,在单击标题时隐藏/显示内容。这里的主要内容是该脚本必须与 post 查询一起运行,因为div 不是手动创建的,所以我无法分配特定的 id 或类进行切换。切换开关必须适用于所有帖子,无论它们有多少个。
这是我用来查询父类别(ID 327)帖子
的代码<div id="subcat" class="m-t-1 f13 georgia bold dark-grey">
<?php
//get all child categories for a certain category ID, then for each child category display the posts
$parent_cat = 327;
$taxonomy = 'category';
$cat_children = get_term_children( $parent_cat, $taxonomy );
if ($cat_children) {
foreach($cat_children as $category) {
$args=array(
'cat' => $category,
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => -1,
'caller_get_posts'=> 1
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
// echo 'Category name??' . $category;
$cat_name = get_cat_name($category);
echo <<<EOD
<div id="x">{$cat_name}</div>
EOD;
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<h5 class="m-v-10"><a href="<?php the_permalink() ?>" class="f13 blauet bold arial" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h5>
<div id="mini-content" class="f12 dark-grey w-normal arial dotted-1-bottom m-b-3"><?php the_content();?></div>
<?php
endwhile;
}
}
}
wp_reset_query(); // Restore global post data stomped by the_post().
?>
</div><!-- #subcat -->
我想要的是,通过点击一个(现在是帖子的链接),它会打开div id="迷你内容" .
非常感谢您的帮助。
我的问候,祝你有美好的一天。
首先,<div id="x">{$cat_name}</div>
x
从哪里来?
所以,你要做的是,当点击标题div(id="x")时,用id="mini-content"切换div。
确保页面中的所有元素都有唯一的 ID!如果没有,请设法自己执行此操作。在你没有这样做之前,你不能走得更远!!
然后将 click 事件与id="x"
元素绑定。由于可以在呈现文档后加载元素,因此请使用.on()
绑定单击。因此,现在和未来的"x"元素将在点击事件中绑定。
如果您不习惯使用.on()
,请查看文档 http://api.jquery.com/on/
在处理程序函数中$(document).on("click","#x",function(){...});
mini-content
元素上调用.toggle()
。当然,迷你内容的初始可见性必须"隐藏"。