将多层下拉菜单从点击变为悬停

时间：2020-01-22 08:41:00

标签： html css twitter-bootstrap

我目前有一个多层下拉列表，最多可以列出三个列表。我正在尝试通过悬停自动显示所有列表。这是因为我的目的是要拥有一个href链接，该链接现在仅在第三个下拉列表中有效，因为之前单击其他链接的链接用于显示下一个下拉列表。

我试图在类dropdown-menu和dropdown子菜单的css中用“ display：block;”添加：hover。但这不起作用，并且列表仍然仅在单击时显示。

1

https://jsfiddle.net/nmv2d41w/1/

下降： 

<div class="dropdown p-left-15">
  <button class="filter-btn filter-btn-default dropdown-toggle" type="button" data-toggle="dropdown">Filter Coupons</button>
  <!--Category 1-->
  <ul class="dropdown-menu filter-dropdown">
      <li class="dropdown-submenu">
        <a class="test" value="" href="#">C1-1</a>
          <!--Category 2-->
          <ul class="dropdown-menu">
            <li class="dropdown-submenu">
              <a class="test" value="" href="#">C2-1</a>
              <!--Category 3-->
                <ul class="dropdown-menu">
                  <li><a href=""></a>C3-1</li>
                  <li><a href=""></a>C3-2</li>
                  <li><a href=""></a>C3-3</li>
                </ul>
            </li>
          </ul>
      </li>
      <li class="dropdown-submenu">
        <a class="test" value="" href="#">C1-2</a>
          <!--Category 2-->
          <ul class="dropdown-menu">
            <li class="dropdown-submenu">
              <a class="test" value="" href="#">C2-a</a>
              <!--Category 3-->
                <ul class="dropdown-menu">
                  <li><a href=""></a>C3-a</li>
                  <li><a href=""></a>C3-b</li>
                  <li><a href=""></a>C3-c</li>
                </ul>
            </li>
          </ul>
      </li>
  </ul>
</div>

CSS： 

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu:hover {
  position: relative;
  display: block;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

.filter-btn-default:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}
.filter-btn.focus, .filter-btn:focus, .filter-btn:hover {
    color: #333;
    text-decoration: none;
}
.filter-btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.filter-btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
}

.filter-dropdown li {
  padding: 0px 8px;
  font-size: 14px;
}

.filter-dropdown li:hover {
  background-color: #e6e6e6;
}

.filter-dropdown li a {
  color: black;
  text-decoration: none;
}

2 个答案:

答案 0 :(得分：1)

您可以尝试这样

html 

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <div class="card my-3">
                <div class="card-header">
                    Bootstrap 4 Multilevel Dropdown Hover
                    <div class="options float-right">
                        <a class="settings"><i class="fa fa-cog"></i></a>
                        <a href="#" class="collapse"><i class="fa fa-chevron-up"></i></a>
                        <a href="#" class="reload"><i class="fa fa-refresh"></i></a>
                        <a href="#" class="fullscreen"><i class=" fa fa-expand"></i></a>
                        <a href="#" class="remove"><i class="fa fa-times"></i></a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="btn-group">
                                <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary dropdown-toggle"
                                   href="">
                                    Dropdown
                                </a>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                                    <li><a class="dropdown-item" href="#">level 1</a></li>
                                    <li><a class="dropdown-item" href="#">level 1</a></li>
                                    <li class="dropdown-divider"></li>
                                    <li class="dropdown-submenu">
                                        <a class="dropdown-item" tabindex="-1" href="#">
                                            level 1
                                        </a>
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item" tabindex="-1" href="#">level 2</a></li>
                                            <li class="dropdown-submenu">
                                                <a class="dropdown-item" href="#">
                                                    level 2
                                                </a>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="#">3rd level</a></li>
                                                    <li><a class="dropdown-item" href="#">3rd level</a></li>
                                                </ul>
                                            </li>
                                            <li><a class="dropdown-item" href="#">level 2</a></li>
                                            <li><a class="dropdown-item" href="#">level 2</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

css 

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu> a:after {
  content: ">";
  float: right;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: 0px;
  margin-left: 0px;
}

.dropdown-submenu:hover>.dropdown-menu {
  display: block;
}

js 

$(".btn-group, .dropdown").hover(
  function () {
    $('>.dropdown-menu', this).stop(true, true).fadeIn("fast");
    $(this).addClass('open');
  },
  function () {
    $('>.dropdown-menu', this).stop(true, true).fadeOut("fast");
    $(this).removeClass('open');
  });

working demo

如果您有任何疑问，请告诉我。

答案 1 :(得分：0)

尝试这样的事情... 

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
  display: block;
}

.dropdown-submenu>a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #ccc;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
  border-left-color: #fff;
}

.dropdown-submenu.pull-left {
  float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}
<html>
    <head>
        <title></title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" 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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

        
    </head>
    <body>
         <div class="container">
  	<div class="row">
        <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </button>
            <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
                <li class="dropdown-item"><a href="#">Some action</a></li>
                <li class="dropdown-item"><a href="#">Some other action</a></li>
                <li class="dropdown-divider"></li>
                <li class="dropdown-submenu">
                  <a  class="dropdown-item" tabindex="-1" href="#">Hover me for more options</a>
                  <ul class="dropdown-menu">
                    <li class="dropdown-item"><a tabindex="-1" href="#">Second level</a></li>
                    <li class="dropdown-submenu">
                      <a class="dropdown-item" href="#">Even More..</a>
                      <ul class="dropdown-menu">
                          <li class="dropdown-item"><a href="#">3rd level</a></li>
                            <li class="dropdown-submenu"><a class="dropdown-item" href="#">another level</a>
                            <ul class="dropdown-menu">
                                <li class="dropdown-item"><a href="#">4th level</a></li>
                                <li class="dropdown-item"><a href="#">4th level</a></li>
                                <li class="dropdown-item"><a href="#">4th level</a></li>
                            </ul>
                          </li>
                            <li class="dropdown-item"><a href="#">3rd level</a></li>
                      </ul>
                    </li>
                    <li class="dropdown-item"><a href="#">Second level</a></li>
                    <li class="dropdown-item"><a href="#">Second level</a></li>
                  </ul>
                </li>
              </ul>
        </div>
    </div>
</div>
    </body>
</html>

相关问题
最新问题