Question

打开新链接时，我无法使用手风琴菜单进行切换并保持打开状态。我已经尝试过使用cookie制作，并且几乎可以正常使用。当我单击链接时，它不会折叠。请正确显示该链接，并且无法弄清为什么它无法正常工作。

前端php代码

jQuery(document).ready(function() {
    var last=jQuery.cookie('activeAccordionGroup');
    console.log(last);
    if (last!=null) {
        jQuery("#"+last).collapse("show");
    }
    
    //This piece of code for non accordion nav menu.
    jQuery(".menu-item a").each(function() {
        if ((window.location.href.indexOf(jQuery(this).attr('href'))) > -1) {
            jQuery(this).addClass('activeMenuItem');
        } 
    });
});

jQuery('#MainMenu').on('shown.bs.collapse', function () {
    var active=jQuery("#MainMenu .sub-menu").attr('id');
    jQuery.cookie('activeAccordionGroup', active);
});

jQuery('#MainMenu').on('hidden.bs.collapse', function () {
    jQuery.removeCookie('activeAccordionGroup');
});

<nav>
    <h3 class="mb-5">Procedurehåndbog</h3>
    <hr>

    <div class="mt-5 proc_menu" id="MainMenu">

            <?php
                
                foreach($pterms as $pterm){
                    $children = get_terms( 'kategorier', array(
                        'hide_empty' => true,
                        'parent' => $pterm->term_id,
                    ));
                    
                        //if childs not empty 
                        if(empty($children)){
                            echo "<div class='menu-item'><a href='". get_term_link($pterm->slug, 'kategorier') ."' id='proc_bt_$pterm->slug'>$pterm->name</a></div>";
                        } else {
                            echo "<div class='menu-item'><a href='#submenu_$pterm->slug' id='proc_bt_$pterm->slug' data-toggle='collapse' data-parent='#MainMenu'>$pterm->name</a></div>";
                            echo "<div class='collapse sub-menu' id='submenu_$pterm->slug' >";
                                foreach($children as $child) {
                                    echo "<div class='ml-3'><a href='". get_term_link($pterm->slug, 'kategorier') ."'>$child->name</a></div>"; 
                                }
                            echo "</div>"; 
                        }
                   
                }
            ?>

    </div>

</nav>

Answer 1

看看下面的代码是否可以解决您的问题，在我的修改中，解决了该问题，仅使用了默认引导程序，而未添加或配置javascript。我没有使用示例中剩下的javascript。切记将功能设置更改为您所使用的设置。在我的示例中，我使用了默认的wordpress类别。

<nav>
    <h3 class="mb-5">Procedurehåndbog</h3>
    <hr>

    <div class="mt-5 proc_menu" id="MainMenu">

            <?php
                $current_cat = get_term_by( 'slug', get_query_var( 'term' ), get_query_var( 'taxonomy' ) );
                $current_term_id = $current_cat ? $current_cat->term_id : false;
                $current_term_id = $current_term_id == false ? $cat : false;

                $pterms = get_terms( 'category', array(
                    'hide_empty' => true,
                    'parent' => 0,
                ));

                foreach($pterms as $pterm){
                    $children = get_terms( 'category', array(
                        'hide_empty' => false,
                        'parent' => $pterm->term_id,
                    ));
                        //if childs not empty 
                        if( empty( $children ) ){
                            echo "<div class='menu-item'><a href='". get_term_link($pterm->slug, 'category') ."' id='proc_bt_$pterm->slug'>$pterm->name</a></div>";
                        } else {

                            $actived = '';
                            //its important
                            if( $current_term_id == $pterm->term_id ){
                                $actived = ' show ';
                            }
                            $chiilds_out = '';
                            foreach($children as $child) {
                            //its important
                                if( $current_term_id == $child->term_id ){
                                    $actived = ' show ';
                                }
                                $chiilds_out .= "<div class='ml-3'><a href='". get_term_link($child->slug, 'category') ."'>$child->name</a></div>"; 
                            }

                            echo "<div class='menu-item'><a href='#submenu_$pterm->slug' id='proc_bt_$pterm->slug' data-toggle='collapse' data-parent='#MainMenu'>$pterm->name</a></div>";
                            echo "<div class='collapse sub-menu $actived' id='submenu_$pterm->slug' >";
                                echo $chiilds_out;
                            echo "</div>"; 
                        }

                }
            ?>

    </div>

</nav>

单击时如何激活和打开手风琴自定义菜单

1 个答案: