Question

我有这个代码:( ng-repeat可以被认为是循环）

<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>

其中包含以下类：按钮的下拉菜单和下拉菜单的下拉列表，然后是下拉菜单。我想这样做，当按钮：hover激活时，会显示下拉菜单。

以下是css代码：

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

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

Answer 1

对于角度，请执行与下面类似的操作。当鼠标进入和离开按钮时，它会显示并隐藏下拉列表。

＆＃13;

angular
  .module('exampleApp', [])
  .controller('ExampleController', ExampleController);

function ExampleController() {
  var vm = this;
  vm.isDropDownShowing = false;
  vm.toggleDropDown = function() {
    vm.isDropDownShowing = !vm.isDropDownShowing
  }
}

＆＃13;

<!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>

＆＃13;

只有CSS。

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 2

您可以使用jquery悬停轻松完成此操作。我刚试过这个jsfiddle。希望这就是你要找的东西。

添加了以下脚本。

$("ul.dropdown-menu").hide();

$( ".categoryButtons" ).hover(
  function() {
    $("ul.dropdown-menu").slideDown();
  }, function() {
    $("ul.dropdown-menu").slideUp();
  }
);

编辑：但是如果在按钮上进行悬停，则只要移动到列表，就会调用悬停结束功能。所以更好地做出以下改变：

$( ".categoryButtons" ).hover(
  function() {
    $("ul.dropdown-menu").slideDown();
    $("ul.dropdown-menu").mouseleave(function() {
        $("ul.dropdown-menu").slideUp();
    });
  });

$( ".categoryButtons" ).mouseleave(function() {
        $("ul.dropdown-menu").slideUp();
});

点击下拉显示下拉菜单中的悬停按钮

2 个答案: