logo标签列表

Bootstrap 4 - 让下拉菜单的父级链接可点击

javascripthtmlcsstwitter-bootstrap-4
7
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

刚接触 bootstrap。这是基于Bootstrap示例的代码。现在下拉菜单会显示出来，但是无法点击下拉菜单本身。我想让所有父级导航链接都能工作。就像这个网站：https://eastcfashion.com/

例如，点击“男装系列”将为您带来该地区的所有系列。但是，您可以只浏览特定项目的下拉菜单。

我正在尝试实现一种方式，即主要父级导航将说“项目”。并且项目的下拉菜单将显示每个项目的特定页面，如项目1、项目2等。但是，单击“项目”将带您进入一个页面，其中项目1、项目2和项目集将作为组而不是单独显示。

我认为你想要在鼠标悬停时出现下拉菜单...对吗..？ - Bhuwan
8个回答
10

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;
    });

  }
});
@media only screen and (min-width:769px) {
  .dropdown:hover .dropdown-menu {
    display: block;
  }
  .dropdown-submenu {
    position: relative !important;
  }
  .dropdown-submenu>.dropdown-menu {
    top: 0 !important;
    left: 100% !important;
    margin-top: -6px !important;
    margin-left: -1px !important;
    border-radius: 0 !important;
  }
  .dropdown-submenu:hover>.dropdown-menu {
    display: block !important;
  }
  .dropdown-submenu>a:after {
    display: block;
    content: "\f105";
    font-family: 'FontAwesome';
    margin-top: -18px;
    right: 15px;
    position: absolute;
    font-weight: 300;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://v4-alpha.getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li><li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

你的下拉菜单没有正常工作...当我从下拉菜单链接中下来时，下拉菜单消失了。 - Bhuwan
我已经在我的本地服务器上尝试了这段代码。请将此代码复制到您的文件中。它可以正常工作。实际上，他想要父菜单可链接。 - HTML Guruz
当您打开JS Fiddle时，JS脚本在刷新后无法加载，但正常工作。因此，请在您的文件中更新此代码。您可以访问https://jsfiddle.net/htmlguruz/odz25mL7/。再次打开后请刷新页面。谢谢。 - HTML Guruz
9
最简单的方法是从父元素中删除"data-toggle"属性！ 编辑：感谢提示，以下是代码示例： 我将这个更改为：
<a class="p-2 text-dark dropdown-toggle" data-toggle="dropdown" style="font-size:1.25rem;" href= {% url 'link' %}>Link</a>

转换为：

<a class="p-2 text-dark dropdown-toggle" style="font-size:1.25rem;" href= {% url 'link' %}>Link</a>

所以，本质上我只是删除了数据切换属性，从而将一个可悬停的下拉菜单转换为具有可点击父链接的可悬停下拉菜单。
1
请确保放置如何实现的代码，这样答案=结果=) - Paradoxetion
8

我尽力让代码简单易懂。我的解决方案是检测下拉按钮/链接的第二次点击，然后在那时跟随链接。

$('.navbar .dropdown > a').click(function() {
 if (!$(this).hasClass("parent-clicked")) {
    $(this).addClass("parent-clicked");
  } else {
    location.href = this.href;
  }
});

这也适用于折叠视图。
如果有人想在第一次点击时工作，只需删除if语句。我的意思是只留下location.href = this.href;。 - kanlukasz
4

我采用了Joe的答案，并根据自己的需求进行了改进。

/*
 * Only go to the link when dropdown is already open (if the dropdown is a link)
 */
$('.navbar ul.navbar-nav > .dropdown > a[href]').click(function() {
    var dropdown = $(this).next('.dropdown-menu');
    /*
     * The dropdown can be non-existent
     * The dropdown can be already open by css
     * (for instance display: block from a custom :hover setting) 
     * or a "show" class on the element which also sets a display: block;
     */
    if (dropdown.length == 0 || $(dropdown).css('display') !== 'none') {
        if (this.href) {
            location.href = this.href;
        }
    }
});

这个的 Bootstrap 4 html 如下：
<header class="navbar"> 
    <ul class="nav navbar-nav">            
        <li class="nav-item dropdown">
            <a class="nav-link" href="/planning" data-toggle="dropdown">
                Planning
            </a>
            <ul class="dropdown-menu">
                <li class="dropdown-item">
                    <a href="/day-planning">Day planning</a>
                </li>
            </ul>
        </li>
    </ul>
</header>
3

在Bootstrap 4中可以点击的下拉链接

我隐藏了原来的下拉三角形图标，并制作了一个新的加号图标，因为原始图标非常小，并且是使用伪类:after创建的，用户很难指向鼠标并点击它。

所以父级href链接将像平常一样工作，但当用户单击加号图标时，它将打开下拉菜单。

/* -----------------------------------------------------------------------
Make Bootstrap dropdown "a" link clickable
But when clicking plus icon, show the dropdown
--------------------------------------------------------------------------- */
function clickableDropdownLink() {

    if (window.matchMedia("(max-width: 992px)").matches) {
        const dropdownToggle = $('.navbar .dropdown > a');
        dropdownToggle.append('<span class="dropdown-icon"></span>');
        dropdownToggle.removeAttr('data-toggle');

        $('.navbar .dropdown > a').click(function(e) {
            e.preventDefault();
            if ((e.target.tagName == 'A')) {
                const route = $(this).attr("href");
                window.location.href = route == '/' || route == '#' ? window.location.href : route;
                return;
            }
        })

        const dropdownIcon = $('.navbar .dropdown > a > span.dropdown-icon');
        dropdownIcon.click(function() {
            const parentLink = $(this).parent("a.nav-link");
            parentLink.parent(".nav-item").toggleClass("show");
            parentLink.next(".dropdown-menu").toggle();
        })

    }
}


clickableDropdownLink();


/* ------------------------------------------------------------------------------------
This is optional, this could make your app slower
 If you want to make a dropdown link clickable after user resizing screen, you can add this. This could make your app slower
 ----------------------------------------------------------------------------------------- */
$(window).resize(function() {
    clickableDropdownLink();
})



/* ------------------------------------------------------------------------------------
This is optional
If you also want the dropdown link work in Desktop size. 
----------------------------------------------------------------------------------------- */

if (window.matchMedia("(min-width: 992px)").matches) {
    $('.navbar .dropdown > a').click(function() {
        location.href = this.href;
    });
}
.dropdown .dropdown-icon{
      display: none;
            position: absolute;
            padding: 15px;
            background: #fff;
            right: 10px;
            top: 8px;
}

.dropdown .dropdown-icon:before{
  transition: all ease 0.5s;
                background: #444;
                height: 2px;
                width: 16px;
                top: 14px;
                left: 7px;
                content: "";
                position: absolute;
}
.dropdown .dropdown-icon:after{
  transition: all ease 0.5s;
                    background: #444;
                    content: "";
                    height: 16px;
                    left: 14px;
                    position: absolute;
                    top: 7px;
                    width: 2px;
}

.dropdown.show .dropdown-icon:after{
    transform:rotate(-90deg);
}

.dropdown.show .dropdown-icon:before{
   transform:rotate(-180deg);
}

.navbar .dropdown .dropdown-toggle .dropdown-icon{
     display:none;
 }

@media(max-width:992px){
  .navbar .dropdown .dropdown-toggle::after{
     display:none;
  }
  .navbar .dropdown .dropdown-toggle .dropdown-icon{
     display:block;
  }
  .navbar .dropdown .dropdown-menu .dropdown-item{
      white-space:pre-wrap;
  }
}
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Clickable Dropdown Link</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
 <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="https://www.google.com" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown1
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action 1</a>
          <a class="dropdown-item" href="#">Another action 1</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here 1</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="https://www.google.com" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown 
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.1/umd/popper.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js'></script><script  src="./script.js"></script>

</body>
</html>

0
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>

这段代码通过点击事件和href来切换下拉菜单。因此，根据您的需要 -

将href重定向到通用项目页面，并添加悬停事件以使用jquery或CSS显示下拉菜单。要显示下拉菜单，只需将open类添加到<li class="nav-item dropdown">中。

使用CSS， 使用Jquery

0
//Fix bootstrap dropdown parent click
let clicked = 0;
document.querySelector('.dropdown-toggle').addEventListener('click',(e)=>{    
    clicked++;
    if(clicked > 1 && e.target.classList.contains('show')){
        location.href = e.target.href
        clicked = 0;
    }
})

这是一个简单的JavaScript解决方案，如果下拉菜单包含打开类，则父级元素的第二次点击将重定向到位置。

0
这是我的解决方案。思路是检测用户单击下拉按钮/链接的区域，并重定向到该URL。
  // clickable dropdown menu parent
  $('.navbar .dropdown > a').on('click', function(e) {
    let elementBegin = $(this).offset()['left']; // get link position X

    // get the width of the menu by text's length
    // you need to contain the text inside a span tag
    let spanWidth = $(this).find("> span").width();
    let clickAreaLength = spanWidth * 0.9; // 90% of width = clickable area

    let clickPositionX = e.pageX; // position of the click

    // if click position is inside the clickable area, then redirect
    if (clickPositionX < elementBegin + clickAreaLength) {
      location.href = this.href;
    }
  });

这在折叠视图（移动设备）中同样有效。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接