首页 文章

使用slideToggle打开/关闭具有自定义税级 Headers 的自定义帖子类型导航

提问于
浏览 次
1

The Goal: 使用slideToggle可以扩展 foreach 下列出的每个菜单

The Problem: 我可以加载我的每个自定义分类法和自定义帖子类型 Headers （和链接），但我没有预定义的类或ID来区分每个，所以当我点击任何 h4 所有 li 项目展开时 .

Bonus: 如果 .active 类（ li a.active ）的父级保持打开而其余部分关闭则会很棒 .

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

The 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();

The jQuery

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

谢谢您的帮助！

javascript php jquery wordpress custom-post-type

1 回答

  • 0

    这是一个简单的例子，但基本上你在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() .

    Here's a DEMO: 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();
});
    回复于

相关问题