使父菜单可点击 [英] Make parent menu clickable

问题描述

有没有办法让顶级菜单项可点击，同时仍显示下拉菜单？

Is there a way to make the top level menu items clickable while still having the dropdowns show up?

见网站

我在Wordpress网站上使用bootstrap 3， http://www.creativewebdesign.ro/en/blog/wordpress/create-a-responsive-wordpress-theme-with-bootstrap-3-header-and-footer/

I am using bootstrap 3 on my Wordpress site using these instructions: http://www.creativewebdesign.ro/en/blog/wordpress/create-a-responsive-wordpress-theme-with-bootstrap-3-header-and-footer/

header.php

        <?php
            wp_nav_menu( array(
                'menu'              => 'primary',
                'theme_location'    => 'primary',
                'depth'             => 2,
                'container'         => 'div',
                'container_class'   => 'collapse navbar-collapse navbar-ex1-collapse menu_left',
                'menu_class'        => 'nav navbar-nav menu_left_middle',
                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                'walker'            => new wp_bootstrap_navwalker())
            );
        ?>

        <?php
            wp_nav_menu( array(
                'menu'              => 'submenu',
                'theme_location'    => 'primary',
                'depth'             => 2,
                'container'         => 'div',
                'container_class'   => 'collapse navbar-collapse navbar-ex1-collapse menu_right',
                'menu_class'        => 'nav navbar-nav menu_right_middle',
                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                'walker'            => new wp_bootstrap_navwalker())
            );
        ?>

</nav>

感谢

推荐答案

对我来说，它的工作方式如下：
我假设你使用的是 wp-bootstrap-navwalker

使用编辑器打开wp-bootstrap-navwalker.php，查找行约。 83

Open up the wp-bootstrap-navwalker.php with your editor and look up for line approx. 83

// If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
   $atts['href']        = '#';
   $atts['data-toggle'] = 'dropdown';
   $atts['class']           = 'dropdown-toggle';
} else {
   $atts['href'] = ! empty( $item->url ) ? $item->url : '';
}

将这段代码更改为：

// If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
   $atts['href'] = ! empty( $item->url ) ? $item->url : '';
   //$atts['data-toggle']   = 'dropdown';
   $atts['class']           = 'dropdown-toggle';
} else {
   $atts['href'] = ! empty( $item->url ) ? $item->url : '';
}

注意：$ att ['href']现在启用，$ atts ['data-toggle']被禁用，这使得父链接可点击。

Note: $att['href'] is enabled now, the the $atts['data-toggle'] is disabled which makes the parent link clickable.

现在打开你的style.css并添加这段代码来激活悬停函数

Now open up your style.css and add this piece of code to activate the hover function for your WordPress menu with dropdown and clickable parent.

.dropdown:hover .dropdown-menu {
    display: block;
}

注意：
菜单的行为会稍微改变设备具有小屏幕。
不需要额外的jQuery。

Note: The behaviour of the menu will change slightly on small devices with small screens. No additional jQuery required.

这篇关于使父菜单可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！