jquery - 使父菜单可点击

Question

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

see website

我在我的 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。