Question

我希望导航按钮悬停下拉效果仅在单击其中一个导航按钮时激活。之后一次点击外面就像身体悬停一样应该被禁用。目前悬停正在工作，如果我在其周围移动鼠标激活（因此悬停效果），但如果用户不打算使用导航栏，这可能很烦人。

通常，当悬停导航栏时，按钮不应该下拉任何列表。但是一旦点击任何一个导航栏按钮，直到你点击一侧，就像正文一样，所有导航栏按钮都应该正常悬停。我尝试了一些jQuery但是没有成功。

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <title>BAPTIST</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./headerAndFooter.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">

      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav top-nav pull-right">
          <div class="dropdown">
            <li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> About Us</a></li>
            <div class="dropdown-content">
              <a href="#">Action</a>
              <a href="#">Another action</a>
              <a href="#">Something else here</a>
              <a href="#">Separated link</a>
              <a href="#">One more separated link</a>
            </div>
          </div>

          <div class="dropdown">
            <li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> Providers</a></li>
            <div class="dropdown-content">
              <a href="#">Action</a>
              <a href="#">Another action</a>
              <a href="#">Something else here</a>
              <a href="#">Separated link</a>
              <a href="#">One more separated link</a>
            </div>
          </div>

          <div class="dropdown">
            <li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> Payors</a></li>
            <div class="dropdown-content">
              <a href="#">Action</a>
              <a href="#">Another action</a>
              <a href="#">Something else here</a>
              <a href="#">Separated link</a>
              <a href="#">One more separated link</a>
            </div>
          </div>

          <div class="dropdown">
            <li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> Employers</a></li>
            <div class="dropdown-content">
              <a href="#">Action</a>
              <a href="#">Another action</a>
              <a href="#">Something else here</a>
              <a href="#">Separated link</a>
              <a href="#">One more separated link</a>
            </div>
          </div>


          <div class="dropdown">
            <li class="dropbtn"><a href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> Patients</a></li>
            <div class="dropdown-content">
              <a href="#">Action</a>
              <a href="#">Another action</a>
              <a href="#">Something else here</a>
              <a href="#">Separated link</a>
              <a href="#">One more separated link</a>
            </div>
          </div>
        </ul>
      </div>
    </div>
  </nav>
</body>

</html>

＆＃13;

Answer 1

我在没有你所有css的情况下让你的导航栏工作时遇到了麻烦，所以我使用网站上的通用Bootstrap 3导航栏向你展示。

以下代码的作用是：

只要点击导航中的链接标记，就会将变量allowHover设置为true。
只要用户鼠标输入类别为＆＃34; content＆＃34;的div，allowHover就会设置为false。

我相信其他两个功能都是自我解释的，但如果需要解释，请告诉我。

let allowHover = false

$('nav a').click(function() {
  allowHover = true
})

$('.content').mouseenter(function() {
  allowHover = false
})

$('ul.nav .dropdown').hover(function() {
    if(allowHover) 
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn('fast');
})

$('ul.nav .dropdown').mouseleave(function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut('fast');
})

查看codepen。确保在单击导航栏中的常规链接时，不要将鼠标移动到导航栏之外，否则下拉列表将无法正常工作。

这是您所要求的一个接近的例子，但我认为它足以让您在需要的地方实现自己的演绎。

只需单击

1 个答案: