如何使用Bootstrap 4手风琴为垂直边栏菜单制作Wordpress Walker类？

问题描述

我正在尝试为自己的Wordpress主题内的垂直边栏菜单构建自己的Walker_Nav_Menu类。我正在使用Bootstrap 4作为框架。

我的目标是使用Walker类构建类似以下html的内容。

<div id="accordion">
    <ul>
        <li>
            <a href="#" class="custom-class" id="indiceheading-1" data-toggle="collapse" data-target="#indicecollapse-1" aria-expanded="true" aria-controls="indicecollapse-1">
                Link 1 but it's an accordion
            </a>
            <ul id="indicecollapse-1" class="collapse show" aria-labelledby="indiceheading-1" data-parent="#sidebarIndice">
                <li><a href="...">Link inside the dropdown</a></li>
            </ul>
        </li>
        <li><a href="...">Link 2</a></li>
        <li><a href="...">Link 3</a></li>
        <li>
            <a href="#" class="collapsed" id="indiceheading-2" data-toggle="collapse" data-target="#indicecollapse-2" aria-expanded="false" aria-controls="indicecollapse-2">
                Link 4 but it's an accordion
            </a>
            <ul id="indicecollapse-2" class="collapse" aria-labelledby="indiceheading-2" data-parent="#sidebarIndice">
                <li><a href="...">Link inside the second dropdown</a></li>
            </ul>
        </li>
    </ul>
</div>

我写的助行器类是下一个（但不起作用）

<?php
class Walker_Indice extends Walker_Nav_Menu{

    public function start_lvl( &$output,$depth = 0,$args = array() ) {
        $indent = str_repeat("\t",$depth);
        $output .= "\n$indent<ul class=\"collapse deph_$depth\">\n";
    } //start_lvl

    public function end_lvl( &$output,$depth);
        $output .= "$indent</ul>\n"; //da cambiare a seconda di come apro in start_lvl
    } //end_lvl

    function start_el(&$output,$item,$depth=0,$args=array(),$id=0){
        $indent = ($depth) ? str_repeat("\t",$depth): '';
        $li_attributes='';
        $class_names=$value='';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = ($item->current || $item->current_item_anchestor)? 'active' : '';
        $classes[] = 'menu-item-'.$item->ID;

        $class_names =  join(' ',apply_filters('nav_menu_css_class',array_filter( $classes ),$args ));
        $class_names = ' class="' . esc_attr($class_names) . '"';

        $id = apply_filters('nav_menu_item_id','menu-item-'.$item->ID,$args);
        $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';

        $output .= $indent . '<li' . $id . $value . $class_names . $li_attributes . '>';

        $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr($item->attr_title) . '"' : '';
        $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr($item->target) . '"' : '';
        $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr($item->xfn) . '"' : '';
        $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr($item->url) . '"' : '';

        if($args->walker->has_children){
            $attributes .= ( $args->walker->has_children ) ? ' class="nav-link dropdown-toggle" data-toggle="dropdown"' : '';
        }else{
            $attributes .= ' class="nav-link"';
        }

        $item_output = $args->before;
        $item_output .= '<a' . $attributes . '>';
        $item_output .= $args->link_before . apply_filters( 'the_title',$item->title,$item->ID ) . $args->link_after;

        $item_output .= $args->after;

        $output .= apply_filters ( 'walker_nav_menu_start_el',$item_output,$depth,$args );

    } //start_el
}

有人可以帮我吗？我是新手，所以找不到相应的教程，因为网络上的每个教程都是针对普通的Bootstrap导航栏的，但是对于手风琴，我需要动态数据目标，aria-control ecc。

感谢您的帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）