Heim > Web-Frontend > js-Tutorial > jQuery kombiniert mit CSS, um ein schönes Auswahl-Dropdown-Menü zu erstellen

jQuery kombiniert mit CSS, um ein schönes Auswahl-Dropdown-Menü zu erstellen

PHPz
Freigeben: 2018-10-15 15:09:03
Original
1350 Leute haben es durchsucht

Wenn wir Formulare entwerfen, müssen wir möglicherweise das Auswahl-Dropdown-Optionssteuerelement verwenden. Leider sieht das Standardauswahlsteuerelement im IE-Browser sehr hässlich aus und kann nicht mit Stilen gesteuert werden, ebenso wie Bilder und andere Informationen zu den Optionen hinzugefügt. Heute werde ich anhand von Beispielen erklären, wie man mit CSS und jQuery ein schönes Dropdown-Optionsmenü erstellt.

XHTML

1

请选择城市长沙北京南京堪培拉多伦多

Nach dem Login kopieren
Nach dem Login kopieren

Wie Sie sehen können, verwenden wir div, um das native Select-Tag des Dropdown-Optionssteuerelements zu ersetzen.
CSS

1

2

3

4

5

6

7

8

9

#dropdown{width:186px; margin:80px auto; position:relative}

#dropdown p{width:150px; height:24px; line-height:24px; padding-left:4px; padding-right:30px;

border:1px solid #a9c9e2; background:#e8f5fe url(arrow.gif) no-repeat right 4px;

color:#807a62; cursor:pointer}

#dropdown ul{width:184px; background:#e8f5fe; margin-top:2px; border:1px solid #a9c9e2;

position:absolute; display:none}

#dropdown ul li{height:24px; line-height:24px; text-indent:10px}

#dropdown ul li a{display:block; height:24px; color:#807a62; text-decoration:none}

#dropdown ul li a:hover{background:#c6dbfc; color:#369}

Nach dem Login kopieren

Reden Sie nicht zu viel über Stile. Sie können die Hintergrundfarbe und Schriftfarbe in CSS und sogar andere willkürlich definierte Stile ändern. Im Anhang befindet sich ein kleines Symbol mit einem Dropdown-Pfeil.
jQuery
Wenn Sie auf „Bitte wählen Sie eine Stadt“ klicken, stellen Sie zunächst fest, ob die Dropdown-Ebene „ul“ angezeigt wird. Wenn ja, blenden Sie die Dropdown-Option aus, andernfalls öffnen Sie die Dropdown-Liste (nach unten schieben). -Down-Option

1

2

3

4

5

6

7

8

$("#dropdown p").click(function(){

  var ul = $("#dropdown ul");

  if(ul.css("display")=="none"){

    ul.slideDown("fast");

  }else{

    ul.slideUp("fast");

  }

});

Nach dem Login kopieren

Wenn Sie dann auf die Dropdown-Option klicken, rufen Sie den Optionsinhalt ab und schreiben Sie den Optionsinhalt in das Tag

, und blenden Sie die Dropdown-Option aus.

1

2

3

4

5

$("#dropdown ul li a").click(function(){

  var txt = $(this).text();

  $("#dropdown p").html(txt);

  $("#dropdown ul").hide();

});

Nach dem Login kopieren

Damit ist ein einfacher Dropdown-Optionsvorgang abgeschlossen, ist das nicht sehr einfach?
Wenn Sie bei der Interaktion mit dem Hintergrund den Wert der Option erhalten möchten, müssen Sie natürlich zuerst XHTML definieren.

1

请选择城市长沙北京南京堪培拉多伦多

Nach dem Login kopieren
Nach dem Login kopieren

Wie Sie dem Code entnehmen können, entspricht das Hinzufügen eines rel-Attributs zum a-Tag und das Zuweisen eines Werts dem Wert des Option-Tags von select . Der nächste Schritt besteht darin, den rel-Wert über jQuery abzurufen. Bitte sehen Sie sich den Code an:

1

2

3

4

5

6

7

$("#dropdown ul li a").click(function(){

  var txt = $(this).text();

  $("#dropdown p").html(txt);

  var value = $(this).attr("rel");

  $("#dropdown ul").hide();

  $("#result").html("您选择了"+txt+",值为:"+value);

});

Nach dem Login kopieren

Damit ist ein vollständiger Dropdown-Optionsvorgang abgeschlossen.

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er gefällt euch allen.

【Empfohlene verwandte Tutorials】

1. JavaScript-Video-Tutorial
2. JavaScript-Online-Handbuch
Bootstrap-Tutorial

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage