Question

我已经使用Bootstrap v4.2.1创建了带有子菜单的导航栏。鼠标悬停是通过Javascript实现的。问题是，每当我加载页面并将鼠标悬停在子菜单项上时，菜单就会打开，但出现在该项目的正下方。当我单击菜单时，它消失并重新出现在子菜单的右侧。理想情况下，我希望子菜单显示在下拉菜单的右侧，而不是在最初悬停时显示在底部。我怀疑Java脚本中可能遗漏了一些东西，但我可能错了。任何帮助/建议将不胜感激。这是我的小提琴：https://jsfiddle.net/fzev07tb/

//Script to toggle navbar dropdown
$(document).ready(function() {

  $('.navbar .dropdown-item').on('click', function(e) {
    var $el = $(this).children('.dropdown-toggle');
    var $parent = $el.offsetParent(".dropdown-menu");
    $(this).parent("li").toggleClass('open');

    if (!$parent.parent().hasClass('navbar-nav')) {
      if ($parent.hasClass('show')) {
        $parent.removeClass('show');
        $el.next().removeClass('show');
        $el.next().css({
          "top": -999,
          "left": -999
        });
      } else {
        $parent.parent().find('.show').removeClass('show');
        $parent.addClass('show');
        $el.next().addClass('show');
        $el.next().css({
          "top": $el[0].offsetTop,
          "left": $parent.outerWidth() - 4
        });
      }
      e.preventDefault();
      e.stopPropagation();
    }
  });

  $('.navbar .dropdown').on('hidden.bs.dropdown', function() {
    $(this).find('li.dropdown').removeClass('show open');
    $(this).find('ul.dropdown-menu').removeClass('show open');
  });

});

//Script for OnHover OnClick NavBar Item -->
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;
    });

  }
});

Bootstrap NavBar子菜单更改点击位置的问题

0 个答案: