Сделать родительское меню кликабельным

Question

Есть ли способ сделать элементы меню верхнего уровня кликабельными, в то же время отображая выпадающие списки?

увидеть сайт

Я использую загрузчик 3 на своем сайте Wordpress, используя следующие инструкции: 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

Для меня это сработало так: я предполагаю, что вы используете https://github.com/twittem/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

Вы можете просто добавить класс 'disabled' в этот элемент, используя 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 был).