Наведение курсора на пункт меню верхнего уровня Wordpress и Bootstrap и ссылка на URL

#jquery #wordpress

Вопрос:

Это то, чего я пытаюсь достичь.

Сделайте ссылку на пункт меню начальной загрузки верхнего уровня на страницу, но также отобразите подменю при наведении.

Я нашел некоторый код, который я добавил в свою дочернюю тему function.php . Это делает ссылку доступной для просмотра, но щелчок вызывает появление подменю. Я хочу, чтобы подменю появлялось, но только при наведении курсора мыши, а затем щелчок открывает страницу пункта меню.

Я не программист, поэтому, если кто-нибудь может взглянуть и посмотреть, что не так, я был бы очень благодарен.

Вот код, который у меня есть до сих пор:

 function  custom_nav_menu_link_attributes( $atts, $item, $args ){
  if ( !wp_is_mobile() amp;amp; $args->has_children  ) {
            $atts['href'] = ! empty( $item->url ) ? $item->url : '';
    }
  return $atts;
}

add_filter( 'nav_menu_link_attributes', 'custom_nav_menu_link_attributes', 99, 3 );

function func_make_menu_clickable(){
if ( !wp_is_mobile() ) { ?>
  <script type="text/javascript">
    jQuery(document).ready(function($){      
      if($(window).width() >= 767){
        $('li.menu-item a').click(function(){
          window.location = $(this).attr('href');
        });
      }
    });
  </script>
  <style type="text/css">
  @media all and (min-width: 767px) {
  .menu-item-has-children:hover > ul {
  display: block;
}
}
  </style>
<?php }
}

Спасибо

1. Это не очень понятно. Пожалуйста, рассмотрите возможность добавления HTML-части и другого CSS, если таковые имеются. Кроме того, похоже, что это та часть, в которой заключается ваша логика, поэтому, пожалуйста, проверьте условия «если», если они являются преднамеренными: If ($ (window) . ширина() >= 767){ $(‘ li.меню-пункт a’).щелкните (функция(){ окно. location = $(this).attr(‘href’); }); }

2. как вы вызываете func_make_menu_clickable

Ответ №1:

Я нашел ответ, но он добавляет еще один вопрос…

После долгих проб и ошибок я нашел решение.

Я нашел следующий дополнительный код и добавил его в установленный мной плагин под названием custom JS и CSS:

 jQuery(document).ready(function( $ ){
jQuery(function($) {
    if($(window).width()>769){
        $('.navbar .dropdown').hover(function() {
            $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();

        }, function() {
            $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();

        });

        $('.navbar .dropdown > a').click(function(){
            location.href = this.href;
        });

    }
});
});

Каким-то образом мои ссылки верхнего уровня теперь ссылаются на страницы, и когда я навожу на них курсор, отображается подменю.

Если я удалю начальный код в моем functions.php файл и / или деактивируйте приведенный выше js-код, тогда элементы верхнего уровня не будут ссылаться на страницу. Кажется, каждый фрагмент кода нуждается друг в друге для работы. Я не программист, поэтому не могу сказать вам, почему.

Единственная небольшая корректировка, которую я хотел бы внести сейчас, и это новый вопрос, заключается в том, что в идеале я хотел бы, чтобы пункт меню верхнего уровня не ссылался на страницу, когда веб-сайт находится на мобильном устройстве (я знаю, именно поэтому код начальной загрузки такой, какой он есть).

В любом случае, по крайней мере, я решил половину своей проблемы.

Спасибо всем, кто даже потрудился прочитать это…