隐藏/显示 Query_post ( wordpress ) 的 Div 结果的 jquery 切换

Posted

技术标签:

【中文标题】隐藏/显示 Query_post ( wordpress ) 的 Div 结果的 jquery 切换【英文标题】:Hide/show jquery toggle for a Div result of a Query_post ( wordpress ) 【发布时间】:2013-10-01 22:03:21 【问题描述】:

我正在设计一个网站,其中有一个页面将显示来自给定父类别 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 -->

我想要的是,通过单击 a(现在是帖子的链接),它会打开关闭 div id="mini-content" 。

非常感谢您的帮助。

我的问候,祝你有美好的一天。

【问题讨论】:

嗯,第一件事。你试过什么? whathaveyoutried.com 【参考方案1】:

首先,&lt;div id="x"&gt;$cat_name&lt;/div&gt;x 来自哪里?

所以,您想要做的是,当单击标题 div (id="x") 时,切换 id="mini-content" 的 div。

确保页面中的所有元素都有唯一的 ID !!如果没有,请管理自己做到这一点。除非你没有这样做,否则你不能走得更远!

然后将点击事件与id="x"元素绑定。由于您的元素可以在文档呈现后加载,请使用.on() 绑定点击。所以现在和未来的“x”元素将与点击事件绑定。

如果您不习惯使用.on(),请查看文档http://api.jquery.com/on/

在处理函数$(document).on("click","#x",function()...);mini-content 元素上调用.toggle()。当然,迷你内容的初始可见性必须是“隐藏的”。

【讨论】:

以上是关于隐藏/显示 Query_post ( wordpress ) 的 Div 结果的 jquery 切换的主要内容,如果未能解决你的问题,请参考以下文章

php Wordpres检索密码电子邮件

php 儿童主题的Wordpres功能

PHP Wordpres,查询最新帖子

HTML 在wordpres强制换行

在wordpres中强制换行

text 在Wordpres中添加自定义Jquery脚本