Drupal 8 Bootstrap Theme Dropdown on Hover

Question

Я работаю над созданием пользовательской темы начальной загрузки для Drupal 8, и моя цель состоит в том, чтобы вырезать дочерние элементы главного навигационного меню при наведении курсора, а не нажимать кнопку мыши, я нашел несколько предложений как добавить это к моему CSS в моей теме:

.dropdown:hover .dropdown-menu { 
display: block; 
} 

и это в мои темы .info файла:

function YOURTHEME_menu_link(array $variables) { 
$element = $variables['element']; 
$sub_menu = ''; 

if ($element['#below']) { 
// Prevent dropdown functions from being added to management menu so it 
// does not affect the navbar module. 
if (($element['#original_link']['menu_name'] == 'management') && (module_exists('navbar'))) { 
    $sub_menu = drupal_render($element['#below']); 
} 
else if ((!empty($element['#original_link']['depth'])) && ($element['#original_link']['depth'] == 1)) { 
    // Add our own wrapper. 
    unset($element['#below']['#theme_wrappers']); 
    $sub_menu = '<ul class="dropdown-menu">' . drupal_render($element['#below']) . '</ul>'; 
    // Generate as standard dropdown. 
    $element['#title'] .= ' <span class="caret"></span>'; 
    $element['#attributes']['class'][] = 'dropdown'; 
    $element['#localized_options']['html'] = TRUE; 

    // Set dropdown trigger element to # to prevent inadvertant page loading 
    // when a submenu link is clicked. 
    //$element['#localized_options']['attributes']['data-target'] = '#'; 
    $element['#localized_options']['attributes']['class'][] = 'dropdown-toggle'; 
    //$element['#localized_options']['attributes']['data-toggle'] = 'dropdown'; 
} 
} 

// On primary navigation menu, class 'active' is not set on active menu item. 
// @see https://drupal.org/node/1896674 
if (($element['#href'] == $_GET['q'] || ($element['#href'] == '<front>' && drupal_is_front_page())) && (empty($element['#localized_options']['language']))) { 
$element['#attributes']['class'][] = 'active'; 
} 

$output = l($element['#title'], $element['#href'], $element['#localized_options']); 
    return '<li' . drupal_attributes($element['#attributes']) . '>' .             $output . $sub_menu . "</li>\n"; 
} 

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

Answer 1

Это связано с тем, что выпадающее меню Bootstrap работает с событием click. Вам нужно написать функцию hover с помощью jquery.

Вот как я решил:

$(".nav li.expanded").hover(
    function(){ 
     $(this).addClass("open"); 
    },function(){ 
     $(this).removeClass("open"); 
    } 
); 

добавить открытый или удалить класс, добавить функцией мыши в Bootstrap. Таким образом, это откроет меню.

Answer 2

Это также может быть достигнуто с помощью CSS только с помощью CSS ниже, чтобы открыть подменю при наведении курсора мыши,

ul.nav li.dropdown:hover > ul.dropdown-menu { 
    display: block; 
}