使父菜单可单击

Question

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

看网站

我使用这些说明在我的Wordpress网站上使用bootstrap 3: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>

谢谢

Answer 1

对我来说它的工作方式是这样的:我假设您使用了wp-bootstrap-navwalker

用编辑器打开wp-bootstrap-navwalker.php并查找大约行.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']被禁用,这使得父链接可以点击.

现在打开你的style.css并添加这段代码来激活你的WordPress菜单的悬停功能,带有下拉菜单和可点击的父项.

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

注意:在具有小屏幕的小型设备上,菜单的行为会略有改变.不需要额外的jQuery.

Answer 2

当然，对于每个顶级锚点 \xe2\x80\x93\xc2\xa0，请确保定义 href 并删除 data-toggle 属性。例如，代替：

\n\n

<a title="Design" href="#" data-toggle="dropdown" class="dropdown-toggle">Design <span class="caret"></span></a>\n

\n\n

使用：

\n\n

<a title="Design" href="/design" class="dropdown-toggle">Design <span class="caret"></span></a>\n

\n\n

（或者任何你想要的 href ）。

\n