Question

主题中的导航栏由标题中的函数wp_nav_menu（）添加。我已修改其默认行为，以使悬停时展开下拉菜单，而与使用以下jQuery的“单击时”相反：

jQuery('ul.navbar-nav li.dropdown').hover(function() {
    jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
    jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});

唯一的问题仍然是，我不知道如何为href =“＃”提供一些带有下拉元素的顶级项目的值/链接。当我将鼠标悬停在它们上方时，下拉菜单项会展开，但我仍然希望它们是可单击的，并将用户带到URL。

我知道我可以通过在页面模板中的html / css中手动创建导航栏来做到这一点，但是那样我就失去了用户轻松从WP管理控制台修改菜单的可能性。

是否可以将菜单保留在WP中，并能够创建可悬停展开的可点击（href =“ some_page.php”）下拉菜单？

编辑：

导航栏的生成方式如下：

<?php wp_nav_menu(
                array(
                    'theme_location'  => 'primary',
                    'container_class' => 'collapse navbar-collapse',
                    'container_id'    => 'navbarNavDropdown',
                    'menu_class'      => 'navbar-nav mx-auto',
                    'fallback_cb'     => '',
                    'menu_id'         => 'main-menu',
                    'depth'           => 3,
                    'walker'          => new Understrap_WP_Bootstrap_Navwalker(),
                )
            ); ?>

呈现的菜单为：

 <div id="navbarNavDropdown" class="collapse navbar-collapse"><ul id="main-menu" class="navbar-nav mx-auto"><li id="menu-item-7" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home nav-item menu-item-7"><a title="Home" href="http://wp-ppp:8888/w/" class="nav-link">Home</a></li>
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-34"><a title="About us" href="http://wp-ppp:8888/w/about-us/" class="nav-link">About us</a></li>
<li id="menu-item-126" class="menu-item menu-item-type-custom menu-item-object-custom nav-item menu-item-126"><a title="What&#039;s on" href="http://wp-ppp:8888/w/events/" class="nav-link">What&#8217;s on</a></li>
<li id="menu-item-284" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-284"><a title="Rider" href="http://wp-ppp:8888/w/ridehq/" class="nav-link">Rider</a></li>
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-33"><a title="Join the club" href="http://wp-ppp:8888/w/join-the-club/" class="nav-link">Join the club</a></li>
<li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-35"><a title="Youth" href="http://wp-ppp:8888/w/youth/" class="nav-link">Youth</a></li>
<li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children nav-item menu-item-36 dropdown"><a title="Drivers" href="#" data-toggle="dropdown" class="nav-link dropdown-toggle">Drivers<span class="caret"></span></a>
<ul class=" dropdown-menu" role="menu">
    <li id="menu-item-87" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-87"><a title="Sunday Races" href="http://wp-ppp:8888/w/sunday-races/" class="nav-link">Sunday Races</a></li>
    <li id="menu-item-242" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-242"><a title="Cars" href="http://wp-ppp:8888/w/cars/" class="nav-link">Cars</a></li>
</ul>
</li>
</ul></div>                     </div><!-- .container -->

如您所见，无论哪里有下拉列表元素，顶部元素都是如此。尽管驱动程序是WP仪表板中具有指定URL的自定义链接，但驱动程序的href元素仍为“＃”。

编辑2：

根据以下建议，我修改了bootstrap-wp-navwalker.php。就我而言，这是另一条线。我已经改变了：

if ( $args->has_children && $depth === 0 ) {
    $atts['href']        = '#';
    $atts['data-toggle'] = 'dropdown';
    $atts['class']       = 'nav-link dropdown-toggle';
} else {
    $atts['href']  = ! empty( $item->url ) ? $item->url : '';
    $atts['class'] = 'nav-link';
}
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
$attributes = '';
foreach ( $atts as $attr => $value ) {
    if ( ! empty( $value ) ) {
        $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
                }
            }
$item_output = $args->before;

收件人：

if ( $args->has_children && $depth === 0 ) {
    $atts['href']        = $item->url;
    $atts['data-toggle'] = 'dropdown';
    $atts['class']       = 'nav-link dropdown-toggle';
} else {
    $atts['href']  = ! empty( $item->url ) ? $item->url : '';
    $atts['class'] = 'nav-link';
}
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
    $attributes = '';
    foreach ( $atts as $attr => $value ) {
        if ( ! empty( $value ) ) {
        $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
    $attributes .= ' ' . $attr . '="' . $value . '"';
    }
            }
            $item_output = $args->before;

但是点击时并没有做任何事情（它在浏览器底部的预览栏中显示了正确的网址。

整个navwalker的垃圾箱 https://pastebin.com/EDCXfSXH

如何使下拉菜单链接可点击？

0 个答案: