Stellen auf Hoverschaltfläche einer Drop-Down-Menü Drop-Down-Anzeige

Ich habe diesen Code: (die ng-repeat kann als für Schleifen gedacht werden)Stellen auf Hoverschaltfläche einer Drop-Down-Menü Drop-Down-Anzeige

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

, die diese Klassen hat: Drop-Down für die Dropdown-Listen und dropdown- Schalten Sie für die Schaltflächen und dann Drop-Down-Menü. Ich möchte es so machen, dass, wenn die Schaltfläche: Hover aktiviert ist, das Dropdown-Menü angezeigt wird.

Im Folgenden ist der CSS-Code:

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

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

Quelle

2016-07-18 Ayudh

Für eckig, tun Sie etwas ähnliches wie unten. Es zeigt und verbirgt das Dropdown-Menü, wenn die Maus den Knopf berührt und verlässt.

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>

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

Quelle

2016-07-18 05:53:55 ScottL

CSS-Lösung ist sehr einfach – 0aslam0

Sie leicht diese mit Jquery schweben tun können. habe ich gerade in diesem jsfiddle versucht. Hoffe das war, was du gesucht hast.

Das folgende Skript hinzugefügt.

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

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

EDIT: Aber wenn das Schweben auf die Schaltfläche gemacht wird, sobald Sie in die Liste bewegen, bewegen Ende Funktion aufgerufen wird. Also besser die folgende Änderung vornehmen:

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

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

Quelle

2016-07-18 05:48:46 0aslam0

Stellen auf Hoverschaltfläche einer Drop-Down-Menü Drop-Down-Anzeige

Antwort

Verwandte Themen