Question

您好，我在wordpress中制作了一个自定义模板。我使用WP自定义字段在管理面板中创建新字段。一切正常，但我想添加到我的切换第二级切换。例如，我有一个第一个切换-部分，当您单击它时，它会打开问题，然后当您单击问题时，它会打开每个问题下的答案。

想象一下现在的样子： toggle

protocol_title_22-取节名称prom meta_post

protocol_title_2-从meta_posts提问

我要创建多个切换菜单，我现在只有1个切换级别，但是我想在“问题”下进行另一个切换。

我试图手动添加一些子级别，只是复制并添加新行，但它无法正常工作。

              <div class="protocol">
                        <?php if( have_rows('protocol_2') ): ?>
                            <ul>
                                <?php while( have_rows('protocol_2') ):     the_row(); ?>
                                    <li>
                                        <a class="toggle" href="javascript:void(0);" title="<?php the_sub_field('protocol_title_22'); ?>"><?php the_sub_field('protocol_title_22'); ?></a>                                      

                                        <?php if( have_rows('protocol_title_2') ): ?>
                                            <ul class="protocol-inner">                                 
                                                <?php while( have_rows(protocol_title_2) ): the_row();  ?>
                                                    <li>
                                                        <a><?php the_sub_field(protocol_title_2); ?></a>                                                      

                                                    </li>
                                                <?php endwhile;  ?>
                                            </ul>
                                        <?php endif; ?>
                                    </li>
                                <?php endwhile; ?>
                            </ul>
                        <?php endif; ?>
                    </div>

JS：

//protocols
$('.protocol .toggle').click(function(e) {
    e.preventDefault();      
    var $this = $(this);
    $('li a.toggle').removeClass('active');
    $this.addClass('active'); 
    if ($this.next().hasClass('show')) {
        $this.next().removeClass('show');
        $this.next().slideUp(300);
    } else {
        $this.parent().parent().find('li .protocol-inner').removeClass('show');
        $this.parent().parent().find('li .protocol-inner').slideUp(300);
        $this.next().toggleClass('show');
        $this.next().slideToggle(300);
    }
});
$('.protocol-inner li a').hover(
    function () {
        $(this).addClass('active');
    }, 
    function () {
        $(this).removeClass('active');
    }
);
//protocols

Answer 1

我自己做了这个。只需在第一个切换下添加一个新切换：

<li>
    <a class="toggle" href="javascript:void(0);" title="<?php the_sub_field('protocol_title_2'); ?>"><?php the_sub_field(protocol_title_2); ?></a>                                                      
    <ul class="protocol-inner"> 
        <li>
                <a ><?php the_sub_field(protocol_title_2); ?></a>                                                      
        </li>
    </ul>
</li>

在我的自定义wordpress模板上进行两级切换

1 个答案: