如何在wordpress的父项下对齐下拉菜单

编程问答 2022-11-21

问题描述

我为我的自定义 wordpress 主题创建了一个下拉菜单。要自定义它，我正在使用自定义步行者，但我不知道如何对齐左侧和父级“课程”下方的下拉列表。

我对 start_el 和 start_lvl 函数有点困惑。

目前下拉菜单似乎是在父级之外构建的，因此我无法将其相对于它定位。

dropdown

custom_nav.php

<?php

/**
 * Nav Menu API: Walker_Nav_Menu class
 *
 * @package WordPress
 * @subpackage Nav_Menus
 * @since 4.6.0
 */

/**
 * Core class used to implement an HTML list of nav menu items.
 *
 * @since 3.0.0
 *
 * @see Walker
 */
class my_nav_walker extends Walker {
    private $curItem;

    /**
     * What the class handles.
     *
     * @since 3.0.0
     * @var string
     *
     * @see Walker::$tree_type
     */
    public $tree_type = array( 'post_type','taxonomy','custom' );

    /**
     * Database fields to use.
     *
     * @since 3.0.0
     * @todo Decouple this.
     * @var array
     *
     * @see Walker::$db_fields
     */
    public $db_fields = array(
        'parent' => 'menu_item_parent','id'     => 'db_id',);

    /**
     * Starts the list before the elements are added.
     *
     * @since 3.0.0
     *
     * @see Walker::start_lvl()
     *
     * @param string   $output Used to append additional content (passed by reference).
     * @param int      $depth  Depth of menu item. Used for padding.
     * @param stdClass $args   An object of wp_nav_menu() arguments.
     */
    public function start_lvl( &$output,$depth = 0,$args = null ) {
        //var_dump($this->curItem);

        if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
            $t = '';
            $n = '';
        } else {
            $t = "\t";
            $n = "\n";
        }
        $indent = str_repeat( $t,$depth );

        // Default class.
        $classes = array( 'my-dropdown' );
        array_push($classes,strval($curItem->title));

        $my_id = '';
        if ($args->walker->has_children == true) {
            //var_dump($args->walker->curItem->ID);
            $my_id = $args->walker->curItem->ID;
        }
        /**
         * Filters the CSS class(es) applied to a menu list element.
         *
         * @since 4.8.0
         *
         * @param string[] $classes Array of the CSS classes that are applied to the menu `<ul>` element.
         * @param stdClass $args    An object of `wp_nav_menu()` arguments.
         * @param int      $depth   Depth of menu item. Used for padding.
         */
        //var_dump($args);
        $class_names = implode( ' ',apply_filters( 'nav_menu_submenu_css_class',$classes,$args,$depth ) );
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

        $output .= "{$n}{$indent}<div$class_names><button class=\"dropbtn\" onclick=\"toggleDropdown(".$my_id.")\"><img src=\"" . get_template_directory_uri() . "'/assets/images/chevron-down.svg'\"></button><div class=\"dropdown-content dropdown-content-".$my_id."\">{$n}";
    }

    /**
     * Ends the list of after the elements are added.
     *
     * @since 3.0.0
     *
     * @see Walker::end_lvl()
     *
     * @param string   $output Used to append additional content (passed by reference).
     * @param int      $depth  Depth of menu item. Used for padding.
     * @param stdClass $args   An object of wp_nav_menu() arguments.
     */
    public function end_lvl( &$output,$args = null ) {
        if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
            $t = '';
            $n = '';
        } else {
            $t = "\t";
            $n = "\n";
        }
        $indent  = str_repeat( $t,$depth );
        $output .= "$indent</div></div>{$n}";
    }

    /**
     * Starts the element output.
     *
     * @since 3.0.0
     * @since 4.4.0 The {@see 'nav_menu_item_args'} filter was added.
     *
     * @see Walker::start_el()
     *
     * @param string   $output Used to append additional content (passed by reference).
     * @param WP_Post  $item   Menu item data object.
     * @param int      $depth  Depth of menu item. Used for padding.
     * @param stdClass $args   An object of wp_nav_menu() arguments.
     * @param int      $id     Current item ID.
     */
    public function start_el( &$output,$item,$args = null,$id = 0 ) {
        $this->curItem = $item;

        if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
            $t = '';
            $n = '';
        } else {
            $t = "\t";
            $n = "\n";
        }

        $indent = ( $depth ) ? str_repeat( $t,$depth ) : '';

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

        /**
         * Filters the arguments for a single nav menu item.
         *
         * @since 4.4.0
         *
         * @param stdClass $args  An object of wp_nav_menu() arguments.
         * @param WP_Post  $item  Menu item data object.
         * @param int      $depth Depth of menu item. Used for padding.
         */
        $args = apply_filters( 'nav_menu_item_args',$depth );

        /**
         * Filters the CSS classes applied to a menu item's list item element.
         *
         * @since 3.0.0
         * @since 4.1.0 The `$depth` parameter was added.
         *
         * @param string[] $classes Array of the CSS classes that are applied to the menu item's `<li>` element.
         * @param WP_Post  $item    The current menu item.
         * @param stdClass $args    An object of wp_nav_menu() arguments.
         * @param int      $depth   Depth of menu item. Used for padding.
         */
        $class_names = implode( ' ',apply_filters( 'nav_menu_css_class',array_filter( $classes ),$depth ) );
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

        /**
         * Filters the ID applied to a menu item's list item element.
         *
         * @since 3.0.1
         * @since 4.1.0 The `$depth` parameter was added.
         *
         * @param string   $menu_id The ID that is applied to the menu item's `<li>` element.
         * @param WP_Post  $item    The current menu item.
         * @param stdClass $args    An object of wp_nav_menu() arguments.
         * @param int      $depth   Depth of menu item. Used for padding.
         */
        $id = apply_filters( 'nav_menu_item_id','menu-item-' . $item->ID,$depth );
        $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

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

        $atts           = array();
        $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
        $atts['target'] = ! empty( $item->target ) ? $item->target : '';
        if ( '_blank' === $item->target && empty( $item->xfn ) ) {
            $atts['rel'] = 'noopener';
        } else {
            $atts['rel'] = $item->xfn;
        }
        $atts['href']         = ! empty( $item->url ) ? $item->url : '';
        $atts['aria-current'] = $item->current ? 'page' : '';

        /**
         * Filters the HTML attributes applied to a menu item's anchor element.
         *
         * @since 3.6.0
         * @since 4.1.0 The `$depth` parameter was added.
         *
         * @param array $atts {
         *     The HTML attributes applied to the menu item's `<a>` element,empty strings are ignored.
         *
         *     @type string $title        Title attribute.
         *     @type string $target       Target attribute.
         *     @type string $rel          The rel attribute.
         *     @type string $href         The href attribute.
         *     @type string $aria_current The aria-current attribute.
         * }
         * @param WP_Post  $item  The current menu item.
         * @param stdClass $args  An object of wp_nav_menu() arguments.
         * @param int      $depth Depth of menu item. Used for padding.
         */
        $atts = apply_filters( 'nav_menu_link_attributes',$atts,$depth );

        $attributes = '';
        foreach ( $atts as $attr => $value ) {
            if ( is_scalar( $value ) && '' !== $value && false !== $value ) {
                $value       = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }

        /** This filter is documented in wp-includes/post-template.php */
        $title = apply_filters( 'the_title',$item->title,$item->ID );

        /**
         * Filters a menu item's title.
         *
         * @since 4.4.0
         *
         * @param string   $title The menu item's title.
         * @param WP_Post  $item  The current menu item.
         * @param stdClass $args  An object of wp_nav_menu() arguments.
         * @param int      $depth Depth of menu item. Used for padding.
         */
        $title = apply_filters( 'nav_menu_item_title',$title,$depth );
        
        

        $item_output  = $args->before;
        if ($args->walker->has_children == true) {
            //var_dump($item);
            $item_output .= '<a' . $attributes . ' class="' . $item->ID . '" onclick="toggleDropdown('.$item->ID.')">';
        } else {
            $item_output .= '<a' . $attributes . '>';
        }
        $item_output .= $args->link_before . $title . $args->link_after;
        if ($args->walker->has_children == true) {
            $item_output .= "<button class=\"dropbtn\" onclick=\"toggleDropdown(".$item->ID.")\"><img src=\"" . get_template_directory_uri() . "'/assets/images/chevron-down.svg'\"></button></a>";
        } else {
            $item_output .= '</a>';
        }
        $item_output .= $args->after;

        /**
         * Filters a menu item's starting output.
         *
         * The menu item's starting output only includes `$args->before`,the opening `<a>`,* the menu item's title,the closing `</a>`,and `$args->after`. Currently,there is
         * no filter for modifying the opening and closing `<li>` for a menu item.
         *
         * @since 3.0.0
         *
         * @param string   $item_output The menu item's starting HTML output.
         * @param WP_Post  $item        Menu item data object.
         * @param int      $depth       Depth of menu item. Used for padding.
         * @param stdClass $args        An object of wp_nav_menu() arguments.
         */
        $output .= apply_filters( 'walker_nav_menu_start_el',$item_output,$depth,$args );
    }

    /**
     * Ends the element output,if needed.
     *
     * @since 3.0.0
     *
     * @see Walker::end_el()
     *
     * @param string   $output Used to append additional content (passed by reference).
     * @param WP_Post  $item   Page data object. Not used.
     * @param int      $depth  Depth of page. Not Used.
     * @param stdClass $args   An object of wp_nav_menu() arguments.
     */
    public function end_el( &$output,$args = null ) {
        if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
            $t = '';
            $n = '';
        } else {
            $t = "\t";
            $n = "\n";
        }
        $output .= "{$n}";
        //$output .= "</li>{$n}";
    }

}


?>

my-scripts.js

function toggleDropdown(id,close) {
    console.log(id);
    setTimeout(function() {
        var myTopnav = document.getElementById("myTopnav");
        var dropdown = myTopnav.getElementsByClassName("dropdown-content-" + id)[0];
        console.log(dropdown);
        if (dropdown) {
            console.log(dropdown.className);
            if (dropdown.className.search(" show-dropdown") === -1 && close != true) {
                dropdown.className += " show-dropdown";
            } else {
                dropdown.className = dropdown.className.replace(" show-dropdown","");
            }
        }
    },0)
}

style.css

/*
Theme Name: XXX
*/
a:hover {
    opacity:0.5;
    transition:0.35s opacity;
}
.topnav-container img,.topnav-top-subcontainer img {
    height:20px;
}
.topnav-container img:not(:first-child),.topnav-top-subcontainer img:not(:first-child) {
    height:22px;
}
.topnav-container a:not(:first-child),.topnav-top-subcontainer a:not(:first-child) {
    margin-left:10px;
}
.navbar-toggler {
    margin-bottom:10px;

@media (max-width: 768px) {
    
    nav {
        width:100%;
    }
    nav .container-fluid {
        padding:0;
    }
    .nav-item {
        text-align:center;
        background-color:lightgray;
    }
    .dropdown-menu {
        text-align:center;
    }
 
}

/* nav */
.navbar-icon {
    padding:20px;
}
.navbar-icon img {
    width:40px;
}
.navbar-icon .icon {
    width: 40px;
    height: 40px;
    background: url('./assets/images/menu.svg');
    transition:0.35s opacity;
}
.navbar-icon .icon.open {
    background: url('./assets/images/close.svg');
    background-size: 40px;
}
/* Add a black background color to the top navigation */
.topnav {
    /*background-color: #333;*/
    overflow: hidden;
    width:100%;
    transition:0.35s height;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #888;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    /*border-bottom:1px solid transparent;*/
    transition:0.35s color;
}

/* Add an active class to highlight the current page */
.active {
    /*background-color: #333;*/
    /*border-bottom-color:#333 !important;*/
    color: #333 !important;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/* Dropdown container - needed to position the dropdown content */
.my-dropdown {
    float: left;
    overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.my-dropdown .dropbtn,.dropbtn {
    font-size: 17px;
    border: none;
    outline: none;
    color: #888;
    /*padding: 14px 16px;*/
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    transition:0.35s color;
}
.my-dropdown img {
    width:12px;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0.2);
    z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
    float: none;
    color: #888;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover,.my-dropdown:hover .dropbtn {
    /*background-color: #555;*/
    color: #333;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
/*
.my-dropdown:hover .dropdown-content {
display: block;
}
*/
.my-dropdown .show-dropdown {
    display: block;
}

.collapsing {
    height: 0;
}

/* When the screen is less than 600 pixels wide,hide all links,except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 768px) {
    .topnav-container {
        padding-left:0 !important;
        padding-right:0 !important;
    }
    
    .my-dropdown {
        float: none;
    }
    .dropdown-content {
        background-color:#efefef;
    }
    .topnav a,.my-dropdown .dropbtn,.dropbtn {
        display: none;
    }
    .topnav a {
        float: none;
        text-align: center;
    }
    .topnav a.active {
        background-color:#333;
        color:#fff !important;
    }
    .topnav a.icon {
        float: right;
        display: block;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 768px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: center;
    }
    .topnav.responsive .my-dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .my-dropdown .dropbtn,.dropbtn {
        display: block;
        width: 100%;
        text-align: center;
    }
}

解决方法

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

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

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

javascriptwordpresswp-nav-walker

相关问答

matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd impor...
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：...
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon:...
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Alt...
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirem...