Wählen Sie Liste Hover Dropdown?

Question

Ich habe mir die Antworten angesehen auf: jQuery Drop Down Hover Menu

Zuerst, vielen Dank für die Antworten dort. Ich konnte dies in einem sich ständig weiterentwickelnden Tool implementieren, mit dem ich den Benutzern einen einfacheren Weg zu ihrem Job bieten kann.

Allerdings hatte ich eine Frage, die ich nicht als Antwort auf das vorherige Forum auflisten wollte ... so sollte das Forum nicht verwendet werden.

Auf diesem Tool (das ich oben erwähnt habe), gibt es auch einige <select> Dropdowns in diesem Tool, die die Benutzer angegeben haben, dass die Drop-Downs bei Mouse-Over fallen lassen möchten. So modifizierte ich diesen Code, dies zu zeigen:

$(".DDM").hover(function() { 
 
    $(this).find('ul, select').stop(true, true).slideDown('medium'); 
 
}, function() { 
 
    $(this).find('ul, select').stop(true, true).slideUp('medium'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="DDM"> 
 
    <select class="DDM"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    </select> 
 
</div>

Es ist ja nicht so arbeiten ich denke, meine erste Frage ist: Ist es möglich, Auswahlliste Hover-Dropdown-Listen zu tun, ohne die <select>-<li> zu ändern? ?

Answer 1

Sie können die Anzahl der Einzelteile erhalten und die Größe anpassen:

$('.DDM').hover(function(){ 
var count = $(this).children().length; 
$(this).attr('size', count); 
}, 
function(){ 
$(this).removeAttr('size'); 
}); 

Sie können auf die Größe zu begrenzen, wenn Sie zu viele Optionen haben.

Answer 2

Ja, sehr häufig werden Sie Drop-Down-Menüs finden Sie erstellt mit <ul> und <li> Tags, aber die gleiche Funktionalität kann kommen mit <div> oder <select> (mit Anpassungen). Sie sollten eine Methode wählen und dabei bleiben, bis Sie mehr Erfahrung mit dieser Art von Interaktionen haben. Versuchen Sie,

$(".myClass").on({ 
    'mouseenter':function() { $('#myMenu').slideToggle(); }, 
    'mouseleave':function() { $('#myMenu').slideToggle(); } 
}); 

Dies schaltet das Dropdown, das die untergeordneten Elemente enthält.