Как сделать ссылки на выпадающее меню кликабельными? - PullRequest
Новая
       19

Как сделать ссылки на выпадающее меню кликабельными?

0 голосов
/ 12 октября 2018

Навбар в моей теме добавлен функцией wp_nav_menu () в шапке.Я изменил его поведение по умолчанию, чтобы развернуть раскрывающееся меню при наведении, а не «по щелчку» основного элемента со следующим jQuery: 

jQuery('ul.navbar-nav li.dropdown').hover(function() {
    jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
    jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});

Единственная проблема остается, что я не знаю, какпредоставить href = "#" некоторые значения / ссылки для элементов верхнего уровня с выпадающими элементами.Когда я наводю на них курсор, раскрывающиеся элементы раскрываются, но я все же хотел бы, чтобы они были кликабельными и перенаправляли пользователя на URL.

Я знаю, что могу сделать это, просто создав навигационную панель в html / css в шаблонах страниц вручную, но тогда я потеряю возможность для пользователя легко изменять меню из панели администратора WP.

Можно ли сохранить меню зарегистрированным в WP и иметь возможность создавать кликабельные (href = "some_page.php") раскрывающиеся меню, которые будут разворачиваться при наведении?

РЕДАКТИРОВАТЬ:

Панель навигации генерируется следующим образом: 

<?php wp_nav_menu(
                array(
                    'theme_location'  => 'primary',
                    'container_class' => 'collapse navbar-collapse',
                    'container_id'    => 'navbarNavDropdown',
                    'menu_class'      => 'navbar-nav mx-auto',
                    'fallback_cb'     => '',
                    'menu_id'         => 'main-menu',
                    'depth'           => 3,
                    'walker'          => new Understrap_WP_Bootstrap_Navwalker(),
                )
            ); ?>

Отображаемое меню: 

 <div id="navbarNavDropdown" class="collapse navbar-collapse"><ul id="main-menu" class="navbar-nav mx-auto"><li id="menu-item-7" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home nav-item menu-item-7"><a title="Home" href="http://wp-ppp:8888/w/" class="nav-link">Home</a></li>
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-34"><a title="About us" href="http://wp-ppp:8888/w/about-us/" class="nav-link">About us</a></li>
<li id="menu-item-126" class="menu-item menu-item-type-custom menu-item-object-custom nav-item menu-item-126"><a title="What&#039;s on" href="http://wp-ppp:8888/w/events/" class="nav-link">What&#8217;s on</a></li>
<li id="menu-item-284" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-284"><a title="Rider" href="http://wp-ppp:8888/w/ridehq/" class="nav-link">Rider</a></li>
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-33"><a title="Join the club" href="http://wp-ppp:8888/w/join-the-club/" class="nav-link">Join the club</a></li>
<li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-35"><a title="Youth" href="http://wp-ppp:8888/w/youth/" class="nav-link">Youth</a></li>
<li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children nav-item menu-item-36 dropdown"><a title="Drivers" href="#" data-toggle="dropdown" class="nav-link dropdown-toggle">Drivers<span class="caret"></span></a>
<ul class=" dropdown-menu" role="menu">
    <li id="menu-item-87" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-87"><a title="Sunday Races" href="http://wp-ppp:8888/w/sunday-races/" class="nav-link">Sunday Races</a></li>
    <li id="menu-item-242" class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-242"><a title="Cars" href="http://wp-ppp:8888/w/cars/" class="nav-link">Cars</a></li>
</ul>
</li>
</ul></div>                     </div><!-- .container -->

Как вы можете видеть, где есть выпадающий элемент, верхний элемент, например.Драйверы имеют элемент href как «#», несмотря на тот факт, что это пользовательская ссылка в панели управления WP с указанным URL.

РЕДАКТИРОВАТЬ 2:

Согласно приведенному ниже предложению, я имеюизменил bootstrap-wp-navwalker.php.В моем случае это была другая линия.Я изменил: 

if ( $args->has_children && $depth === 0 ) {
    $atts['href']        = '#';
    $atts['data-toggle'] = 'dropdown';
    $atts['class']       = 'nav-link dropdown-toggle';
} else {
    $atts['href']  = ! empty( $item->url ) ? $item->url : '';
    $atts['class'] = 'nav-link';
}
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
$attributes = '';
foreach ( $atts as $attr => $value ) {
    if ( ! empty( $value ) ) {
        $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
                }
            }
$item_output = $args->before;

на: 

if ( $args->has_children && $depth === 0 ) {
    $atts['href']        = $item->url;
    $atts['data-toggle'] = 'dropdown';
    $atts['class']       = 'nav-link dropdown-toggle';
} else {
    $atts['href']  = ! empty( $item->url ) ? $item->url : '';
    $atts['class'] = 'nav-link';
}
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
    $attributes = '';
    foreach ( $atts as $attr => $value ) {
        if ( ! empty( $value ) ) {
        $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
    $attributes .= ' ' . $attr . '="' . $value . '"';
    }
            }
            $item_output = $args->before;

Но он ничего не делает при клике (показывает правый URL на панели предварительного просмотра в нижней части браузера.

Pastebin всего navwalker https://pastebin.com/EDCXfSXH

...