时间戳

首页 > 解决方案 > 如何制作悬停效果而不是单击引导程序 4 下拉菜单？

javascript - 如何制作悬停效果而不是单击引导程序 4 下拉菜单？

问题描述

如何制作悬停效果而不是单击引导下拉菜单？

以前的答案不包含 jquery 代码，您可以将其粘贴到您自己的脚本中并获得很好的结果。除此之外，以前的答案是为旧版本的引导程序编写的，而对于引导程序 4，它们不起作用。例如这个问题太老了，+当前问题包含一小段代码，它适用于所有人。 

<head>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>

<body>


      <ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link active uppercase" href="#">Home</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle uppercase  outline" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Pages</a>
          <div class="dropdown-menu">
            <a class="dropdown-item uppercase aboutUs" href="#">About us</a>
            <a class="dropdown-item uppercase" href="#">Company</a>
            <a class="dropdown-item uppercase" href="#">Our process</a>
            <a class="dropdown-item uppercase" href="#">Services</a>
            <a class="dropdown-item uppercase" href="#">Contact us</a>
            <a class="dropdown-item uppercase FAQ" href="#">F.A.Q.</a>
          </div>
        </li>
        
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>

标签： javascriptjqueryhtmlcsstwitter-bootstrap

解决方案

只需触发点击事件就hover()可以了：

$('.nav-link').hover(function() {
    $(this).trigger('click');
}, function() { });
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active uppercase" href="#">Home</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle uppercase  outline" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Pages</a>
    <div class="dropdown-menu">
      <a class="dropdown-item uppercase aboutUs" href="#">About us</a>
      <a class="dropdown-item uppercase" href="#">Company</a>
      <a class="dropdown-item uppercase" href="#">Our process</a>
      <a class="dropdown-item uppercase" href="#">Services</a>
      <a class="dropdown-item uppercase" href="#">Contact us</a>
      <a class="dropdown-item uppercase FAQ" href="#">F.A.Q.</a>
    </div>
  </li>
</ul>

推荐阅读