使用 slideToggle 打开/关闭带有自定义税收标题的自定义帖子类型导航

Question

目标： 让foreach 下列出的每个菜单都可以使用 slideToggle 进行扩展

问题： 我能够加载我的每个自定义分类法和自定义帖子类型标题（和链接），但我没有预定义的类或 ID 来区分每个，所以当我点击 any h4所有li 项目展开。

奖励： 如果 .active 类 (li a.active) 的父类在其余部分关闭时保持打开状态，那就太好了。

问题： 如何轻松无缝地修改 php 和/或 php 脚本以允许自定义 ID 或类以更好地打开和关闭切换？或者，有没有更好的方法来做到这一点？

PHP

wp_reset_postdata();
$orig_post_id = get_the_ID();
$custom_terms = get_terms('CUSTOM-TAX');

foreach($custom_terms as $custom_term) {
    wp_reset_query();
    $args = array('post_type' => 'CUSTOM-POST-TYPE',
        'tax_query' => array(
            array(
                'taxonomy' => 'CUSTOM-TAX',
                'field' => 'slug',
                'terms' => $custom_term->slug,
            ),
        ),
    ); ?>

    <div class="CUSTOM-NAV-CLASS">
    <?php 
    $loop = new WP_Query($args);
        if($loop->have_posts()) {
            echo '<h4>'.$custom_term->name.'</h4>';
            ?>
            <ol>

            <?php
            while($loop->have_posts()) : $loop->the_post();
                $class = "";
                if ($orig_post_id == get_the_ID()){
                    $class = "active";
                }
                echo '<li><a href="'.get_permalink().'" class="' . $class . '">'.get_the_title().'</a></li>';
            endwhile;
            ?>
            </ol>
            <?php
    }
    ?>
    </div>
    <?php
}
wp_reset_postdata();

jQuery

$(document).ready(function () {
    $(".CUSTOM-NAV-CLASS li").hide();
    $(".CUSTOM-NAV-CLASS h4").click(function(){
    $(".CUSTOM-NAV-CLASS li").slideToggle();
});

感谢您的帮助！

Answer 1

这是一个简单的例子，但基本上你会在你的 JQuery 中做这样的事情：

$(document).ready(function() {

  //*** hiding the panels that you dont want to show until clicked
  $(".container").hide();

  $(".js-hook").click(function() {

    //*** you now want to toggle the panels to slide up/down
    $(this).children(".container").slideToggle();

  });

});

为包装h4 和panels 的所有父容器提供一个可以定位的类（js-hook）。然后给你所有的面板一个类名（我使用容器）。现在，当页面加载时，您将转到hide() 所有容器并在js-hook 上运行单击事件侦听器。关键是使用$(this)目标到slideToggle()。

这是一个演示：http://jsbin.com/tuhayuyoje/edit?html,js,output

在你的例子中，我相信如果你改变你的 JQuery 看起来像这样，你会得到你想要的：

$(document).ready(function () {
    $(".CUSTOM-NAV-CLASS li").hide();
    $(".CUSTOM-NAV-CLASS h4").click(function(){
    $(this).slideToggle();
});