带有活动链接的 mouseenter 上的引导下拉菜单

Question

我正在尝试在 mouseenter 上显示引导下拉菜单。这没问题，只需要一些jquery，比如：

$('.dropdown-toggle').on('mouseenter', function () {
   $('.dropdown-toggle').dropdown('toggle')
});

我需要的是例如 div 分为两个部分。在每个部分中都会有指向某些内容的链接（使用 Nette 框架，因此会有指向特定操作和演示者的链接）。 但我无法实现。如果下拉菜单有效，则链接无效。

结构应该是这样的：

<div class="dropdown-toggle" data-toggle="dropdown">
  <div>
    <a href="{plink :User:Dashboard:default, 'userId' => $user->getId()}">
      <span class="text-white"><i class="fa fa-user"></i> {$userData["user"]["name"]}</span>
    </a>
  </div>
  <div>
    <a href="{plink :Account:Edit:default}">
      <i class="fa fa-plus-square text-white btn-xs"></i><span class="text-warning"> {_}Není nastaven aktivní účet{/_}</span>
    </a>
  </div>
</div>

找到了一些技巧，使用 data-target 属性，但不知道具体如何。 https://getbootstrap.com/

编辑： jQuery：

  $('.dropdown-toggle').on('mouseenter', function () {
    $(this).dropdown('toggle');
    $('.dropdown-toggle>div>a').on('click', function () {
      location.href = $(this).attr('href');
    });
  });

  $('.dropdown').on('mouseleave', function () {
    $('.dropdown-toggle').dropdown('toggle');
  });

结构：

<button class="dropdown-toggle" data-toggle="dropdown">
  <div>
    <a href="{plink :User:Dashboard:default, 'userId' => $user->getId()}">
      <span class="text-white"><i class="fa fa-user"></i> {$userData["user"]["name"]}</span>
    </a>
  </div>
  <div>
    <a href="{plink :Account:Edit:default}">
      <i class="fa fa-plus-square text-white btn-xs"></i><span class="text-warning"> {_}Není nastaven aktivní účet{/_}</span>
    </a>
  </div>
</button>

Answer 1

在mouseenter 上，您可以将下拉菜单的css 更改为显示，在mouseleve 上，再次隐藏它。试试这样的：

$('.dropdown-toggle').on('mouseenter', function () {
   $('.dropdown-toggle').dropdown('toggle');
   $('.dropdown-menu').css('display', 'flex');
});

$('.dropdown-menu').on('mouseleave', function () {
   $('.dropdown-menu').css('display', 'none');
});

.dropdown-menu div{
  color: #fff;
  padding: 1rem;
}

.dropdown-menu div:first-child{
  background: blue;
}

.dropdown-menu div:last-child{
  background: red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    <div>
      <h1>
        Left Column
      </h1>
    </div>
    <div>
      <h1>
        Right Column
      </h1>

    </div>
  </div>
</div>