Question

我正在使用Bootstrap 4，并且有一个带有下拉链接的菜单项。除了使下拉开关可用于选择其他选项外，我还希望使菜单项的文本成为可单击的链接。有一个好的解决方案吗？

示例：

    <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle data-toggle="dropdown" href="/link-i-want-clickable" role="button" aria-haspopup="true" aria-expanded="false" title="List tickets filtered by custom filter preset">Link I Want Clickable </a>
          <div class="dropdown-menu dropdown-menu-wide">
            <div class="row">

                        <div class="col-md-9 text-truncate">
                            <a href="/url1" id="customFilterPreset1" class="dropdown-item" title="title1">Link 1</a>
                        </div>

                        <div class="col-md-9 text-truncate">
                            <a href="/url2" id="customFilterPreset2" class="dropdown-item" title="title2">Link 2</a>
                        </div>

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

Answer 1

在悬停上切换下拉菜单，而不是单击...，您将需要几行JavaScript。

下面的代码代码段：

$(document).ready(function() {

  $('.myLinkedDropdown').mouseenter(function() {
    $(this).addClass('show')
    $(this).children('.dropdown-menu-wide').addClass('show');
  });

  $('.myLinkedDropdown').mouseleave(function() {
    $(this).removeClass('show');
    $(this).children('.dropdown-menu-wide').removeClass('show');
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Logo</a>

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>



    <li class="nav-item dropdown myLinkedDropdown">
      <a class="nav-link" href="/link-i-want-clickable" title="List tickets filtered by custom filter preset">Link I Want Clickable </a>
      <div class="dropdown-menu dropdown-menu-wide">
        <div class="row">

          <div class="col-md-9 text-truncate">
            <a href="/url1" id="customFilterPreset1" class="dropdown-item" title="title1">Link 1</a>
          </div>

          <div class="col-md-9 text-truncate">
            <a href="/url2" id="customFilterPreset2" class="dropdown-item" title="title2">Link 2</a>
          </div>

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


  </ul>
</nav>

Answer 2

使用数据悬停标签代替数据切换

<li class="dropdown" data-dropdown="dropdown">
    <a href="URL" class="dropdown-toggle" data-hover="dropdown">Parent</a>
    <ul class="sub-menu dropdown-menu">
        <li class="nav-item"><a class="nav-link" href="#">Child 1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Child 2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Child 3</a></li>
    </ul>
</li>

Bootstrap 4：如何使下拉链接的标题在导航栏中可点击

2 个答案: