Question

我为bootstrap4编写了以下代码，但是切换功能不起作用

<li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Template</a>
                                <div class="dropdown-menu">
                                        <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 class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Separated link</a>
                                </div>
  </li>

我也包含了popper.js，但后来却无法解决

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>

实际上，我不希望我们使用popper js，因为我想导入此框架以了解否则会发生冲突

can anyone letme know any help would be appreciated

Answer 1

您可以使用简单的scss代码在悬停中进行切换。

.dropdown{
    &:hover{
       .dropdown-menu{
           visibility: visible;
           opacity: 1;
           overflow: visible;
       }
    }
}
.dropdown-menu{
    visibility: hidden;
    opacity: 0;
    overflow: hidden;
}

Answer 2

.dropdown {
 &:hover{
 .dropdown-menu-mn{
   @extend .dropdown-menu;
     display: block;
     opacity: 1;
     overflow: visible;
   }
   }
  }
  .dropdown-menu-mn{
  @extend .dropdown-menu;
  display: none;
  opacity: 0;
  overflow: hidden;
  }

下拉菜单不适用于带有sass的bootstrap4

2 个答案: