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 [＆＃39; href＆＃39;]现已启用，$ atts [＆＃39;数据切换＆＃39;]被禁用，这使得父链接可以点击。

现在打开你的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）。

使父菜单可单击

3 个答案: