下拉显示下拉菜单上的悬停按钮

debugcn 发表于 Dev

阿尤德

我有以下代码：（ ng-repeat可以认为是for循环的）

<div style="width: 10vw; display: inline-block; border: 1px solid blue;"></div>
<div class= "dropdown" index="$index + 1" ng-repeat = "cat in catData" id="{{cat.id}}" style="display: inline-block; border: 1px dotted #0000FF;">
    <div style="width: 8vw; display: inline-block; border: 1px solid blue;"></div>
    <button style ="width:25px; height: 25px; border-radius: 50%; border: 2px solid blue; 
     position:relative; left: -3px; bottom: -2px;" class="btn btn-default 
     dropdown-toggle categoryButtons" type="button" data-toggle="dropdown" aria-haspopup="true"
     aria-expanded="false">
    </button>
    <ul class="dropdown-menu" aria-labelledby="{{cat.id}}">
        <li ng-repeat="subcat in subcatData" ng-if="subcat.parent === cat.id" id="{{subcat.id}}" ng-click="article('{{subcat.url}}')">
            <a href =""><span class="content">{{subcat.name}}</span></a>
        </li>
    </ul>
</div>

其中具有以下类：dropdown（下拉菜单）和dropdown-toggle（下拉菜单）。我想这样做，以便当button：hover激活时，显示下拉菜单。

以下是css代码：

.categoryButtons:hover {
    background-color: blue !important;
}

.categoryButtons.btn[aria-expanded="true"] { 
    background-color: blue !important;
}

史考特

对于角度，请执行以下类似操作。当鼠标进入并离开按钮时，它显示和隐藏下拉菜单。

angular
  .module('exampleApp', [])
  .controller('ExampleController', ExampleController);

function ExampleController() {
  var vm = this;
  vm.isDropDownShowing = false;
  vm.toggleDropDown = function() {
    vm.isDropDownShowing = !vm.isDropDownShowing
  }
}

<!DOCTYPE html>
<html ng-app='exampleApp'>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
</head>

<body ng-controller="ExampleController as vm">
  <button ng-mouseenter="vm.toggleDropDown()" ng-mouseleave="vm.toggleDropDown()">On Hover list will be shown</button>
  <ul class="dropdown" ng-show="vm.isDropDownShowing">
    <li>test1</li>
    <li>test2</li>
  </ul>
</body>

</html>

仅使用CSS。

.hover-button:hover + .dropdown {
 display:inherit; 
}
.dropdown {
 display:none; 
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <button class="hover-button">On Hover list will be shown</button>
  <ul class="dropdown" >
    <li>test1</li>
    <li>test2</li>
  </ul>
</body>

</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。