Drupal 8 Bootstrap 悬停时的主题下拉菜单

Question

我正在为 Drupal 8 创建自定义 bootstrap 主题，我的目标是让主导航菜单下拉子项悬停而不是让用户点击，我发现了一些建议，例如将此添加到我的主题中的 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下拉菜单作用于点击事件。您需要使用 jquery.

编写悬停功能

我就是这样解决的：

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

我在Bootstrap中添加了打开，或者去掉了class，点击添加功能。所以这将打开菜单。

Answer 2

这也可以仅使用 CSS 来实现，使用下方 CSS 悬停时打开子菜单，

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

Answer 3

针对 Drupal 的 Bootstrap 4 主题更新：

$(".navbar-nav .dropdown").hover(
function(){
  $(this).addClass("show");
  $("ul.dropdown-menu", this).addClass("show");
},function(){
  $(this).removeClass("show");
  $("ul.dropdown-menu", this).removeClass("show");
});

Drupal 8 Bootstrap 悬停时的主题下拉菜单

Drupal 8 Bootstrap Theme Dropdown on Hover

css

drupal-8

twitter-bootstrap-3