Javascript 使用slideToggle打开/关闭带有自定义税务标题的自定义邮政类型nav

目标： 将每个菜单列在

foreach

下，可使用滑动切换进行扩展

问题： 我可以加载我的每个自定义分类法和自定义文章类型标题（和链接），但我没有一个预定义的类或id来区分它们，因此当我单击任何

h4

all

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() {

  //*** 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

的父容器提供一类您可以瞄准的对象（jshook）。然后给所有面板一个类名（我使用的是容器）。现在，当页面加载时，您将

hide（）

所有容器，并在

js钩子上运行一个click事件监听器。关键是使用
$（this）
目标来
滑动切换（）

这里有一个演示：

在您的示例中，我相信如果您将JQuery更改为这样，您将得到您想要的：

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

这是一个简单的示例，但基本上，您可以在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
的父容器提供一类您可以瞄准的对象（jshook）。然后给所有面板一个类名（我使用的是容器）。现在，当页面加载时，您将
hide（）
所有容器，并在
js钩子上运行一个click事件监听器。关键是使用
$（this）
目标来
滑动切换（）

这里有一个演示：

在您的示例中，我相信如果您将JQuery更改为这样，您将得到您想要的：

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

将每个
ol
作为目标而不是创建一个新的
.container
是否是一种不好的做法？我不明白。看起来您只有1个
PHP根据我拥有的Wordpress分类法的数量输出多个列表，并根据每个tax中的帖子数量输出多个列表项。这是一个我根据你的意见模拟出来的例子：哦，我想我明白你的意思了。我添加了一个
.container
的包装，因为当它折叠时，你不能点击
。因此，您将
h4
和
ol
包装在一个div中，并将click事件放在它们上面。我已经为您的示例修改了JQuery：谢谢！你知道怎么做第二部分吗？如果孩子（
li
）拥有类
，我还希望任何
.collapsable
都保持可见。活动的
将每个
ol
作为目标而不是创建一个新的
.container
，这是一种不好的做法吗？我不明白。看起来您只有1个
PHP根据我拥有的Wordpress分类法的数量输出多个列表，并根据每个tax中的帖子数量输出多个列表项。这是一个我根据你的意见模拟出来的例子：哦，我想我明白你的意思了。我添加了一个
.container
的包装，因为当它折叠时，你不能点击
。因此，您将
h4
和
ol
包装在一个div中，并将click事件放在它们上面。我已经为您的示例修改了JQuery：谢谢！你知道怎么做第二部分吗？如果孩子（
li
）拥有类
.active