在Elementor中使用手风琴很难关闭内容

时间:2018-10-14 07:50:59

标签: wordpress accordion

我将custom_post_type用于我的常见问题解答,并制作了一个唯一的页面来显示它。 这是我在functions.php中的代码

function faqs_custom_post_type(){
$labels = array(
    'name' => 'FAQs',
    'singular_name' => 'FAQ',
    'search_item' => 'Search FAQ',
    'all_items' => 'All FAQs',
    'add_new_item' => ( 'Add New FAQ' )
);
$args = array(
    'labels' => $labels,
    'public' => true,
    'has_archive' => true,
    'publicly_queryable' => true,
    'query_var' => true,
    'rewrite' => true,
    'capability_type' => 'post',
    'exclude_from_search' => true,
    'has_archive' => false,
    'hierarchical' => false,
    'supports' => array(
            'title',
            'editor',
            'thumbnail',
            'revisions',
    ),
    'taxonomies' => array('category', 'post_tag'),
    'menu_position' => 5,
    'exclude_from_search' => false
);
register_post_type('faqs',$args);
}
add_action('init','faqs_custom_post_type');

这是我的代码,用于在“常见问题解答”页面(page-faqs.php)中显示内容。

<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">

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

            <!-- Display FAQs Custom Post Type-->
            <?php get_template_part( 'template-parts/content', 'page' ); ?>

            <?php
                $new_loop = new WP_Query( array(
                'post_type' => 'faqs',
                    'posts_per_page' => 10, // put number of posts that you'd like to display
                    'order' => 'ASC'
                ) );
            ?>

            <?php if ( $new_loop->have_posts() ) : $i=1;?>

                <div class="elementor-toggle" role="tablist">
                <?php while ( $new_loop->have_posts() ) : $new_loop->the_post(); ?>

                        <div onclick="clicked(this)" id="elementor-tab-title-104<?php echo $i?>" class="elementor-tab-title" tabindex="104<?php echo $i?>" data-tab="1" role="tab" aria-controls="elementor-tab-content-104<?php echo $i?>">
                            <span class="elementor-toggle-icon elementor-toggle-icon-left" aria-hidden="true">
                                <i class="elementor-toggle-icon-closed fa fa-angle-down"></i>
                                <i class="elementor-toggle-icon-opened fa fa-angle-up"></i>
                            </span>
                             <h4><?php the_title(); ?></h4>
                        </div>
                        <div id="elementor-tab-content-104<?php echo $i?>" class="elementor-tab-content elementor-clearfix" data-tab="1" role="tabpanel" aria-labelledby="elementor-tab-title-104<?php echo $i; $i++?>"><p style="padding-left: 30px;">
                            <?php the_content(); ?></p>
                        </div>



                <?php endwhile;?></div>
            <?php else: ?>
            <?php endif; ?>
            <?php wp_reset_query(); ?>

        <?php endwhile; // End of the loop. ?>

    </main><!-- #main -->

</div><!-- #primary -->

单击#elementor-tab-title时我得到了显示内容部分,但单击返回时我不知道如何隐藏它。

<script>
    jQuery(document).ready(function() {
        jQuery( "#elementor-tab-title" ).click(function(t){alert(jQuery(t).attr('id'))});
    });
</script>

<script>
    function clicked(t) {
        jQuery("#elementor-tab-content-"+jQuery(t).attr('tabindex')).css("display","block")}
</script>

0 个答案:

没有答案