使父菜单可点击

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。

Answer 2

您可以使用 jQuery 将“禁用”类添加到该元素中。 请参见下面的示例：

<script>
     jQuery(document).ready(function() {

           jQuery('ul li > a.dropdown-toggle').addClass('disabled');
    });

</script>

Answer 3

当然 - 对于每个顶级锚点，请确保定义您的 href 并删除 data-toggle 属性。例如，而不是：

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

用途：

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

（或任何你想要的 href ）。