原生js实现下拉列表框-html tutorial-php.cn

Rumah

hujung hadapan web

html tutorial

原生js实现下拉列表框

韦小宝

Nov 17, 2017 pm 02:53 PM

javascriptjatuh ke bawahsenarai

模仿qq列表点击下拉，js原生实现，免费源码提供研究，拿去吧！关注PHP中文网给你更多好看的！

)J44JJ2S%R1}Q9Z2Z8T(}0Q.png

代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PHP中文网--下拉框</title>
<style>
ul , h2 { padding:0; margin:0; }
li { list-style:none; }
#list { width:240px; border:1px solid #333; margin:0 auto; }
#list .lis {}
#list h2 { height:30px; line-height:30px; text-indent:20px; background:yellow; color:#000; }
#list .active { background:orange; color:#000; }
#list ul { display:none; }
#list ul li { line-height:24px; border-bottom:1px solid #333; text-indent:24px; }
#list ul .hover { background:pink; }
</style>
<script>
window.onload = function (){
	var oUl = document.getElementById(&#39;list&#39;);
	var aH2 = oUl.getElementsByTagName(&#39;h2&#39;);
	var aUl = oUl.getElementsByTagName(&#39;ul&#39;);
	var aLi = null;
	var arrLi = [];
	for(var i=0;i<aH2.length;i++){
		aH2[i].index=i;
		aH2[i].onclick = function(){
			for(var i=0;i<aH2.length;i++){
				if(aH2[i] !=this){
					aUl[i].style.display=&#39;none&#39;;
					aH2[i].className=&#39;&#39;;
				}
			}
			if(this.className==&#39;&#39;){
				aUl[this.index].style.display=&#39;block&#39;;
				this.className=&#39;active&#39;;
			}else{
				aUl[this.index].style.display=&#39;none&#39;;
				this.className=&#39;&#39;;
			}
		};
	}
	for(var i=0;i<aUl.length;i++){
		aLi = aUl[i].getElementsByTagName(&#39;li&#39;);
		for(var j=0;j<aLi.length;j++){
			arrLi.push(aLi[j]);
		}
	}
	for(var i=0;i<arrLi.length;i++){
		arrLi[i].onclick=function(){
			for(var i=0;i<arrLi.length;i++){
				if(arrLi[i] !=this){
					arrLi[i].className=&#39;&#39;;
				}
			}
			if(this.className==&#39;&#39;){
				this.className=&#39;hover&#39;;
			}else{
				this.className=&#39;&#39;;
			}
		};
	}
};
</script>
</head>

<body>

<ul id="list" style="margin-top:50px;">
	<li class="lis">
  	<h2>我的好友</h2>
    <ul>
    	<li>a111</li>
    	<li>a222</li>
    	<li>a333</li>
    	<li>a444</li>
    </ul>
  </li>
	<li class="lis">
  	<h2>陌生人</h2>
    <ul>
    	<li>b111</li>
    	<li>b222</li>
    	<li>b333</li>
    	<li>b444</li>
    	<li>b555</li>
    </ul>
  </li>
	<li class="lis">
  	<h2>黑名单</h2>
    <ul>
    	<li>c111</li>
    	<li>c222</li>
    </ul>
  </li>
</ul>

</body>
</html>

免费拿去研究吧！更多好的源码尽在PHP中文网，关注我们给你好看哦~

相关推荐：

css，js骰子抽奖源码

html会动的小狗狗源码

js原声实现简单的微信聊天功能

Atas ialah kandungan terperinci 原生js实现下拉列表框. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Atribut `itemref` untuk microdataJul 24, 2025 am 03:19 AM

ItemREF adalah atribut dalam microdata yang digunakan untuk menyebarkan kandungan dalam halaman yang berkaitan. Tujuan utamanya adalah untuk membolehkan unsur -unsur yang tidak tergolong dalam skop item semasa untuk menjadi sebahagian daripada objek, dengan itu merealisasikan rujukan jauh. Kaedah penggunaan termasuk: 1. Tambah skop item dan ID unik ke objek utama; 2. Gunakan itemref untuk merujuk kepada ID elemen lain pada objek utama; 3. Elemen yang dirujuk mesti mempunyai itemprop dan ID selaras dengan senarai itemref. Senario yang berkenaan termasuk sekatan susun atur, struktur multiplexing, sistem CMS, dan lain -lain. Nota termasuk: ia hanya boleh digunakan untuk elemen dengan skop item, elemen sasaran mestilah halaman yang sama, ID mestilah unik, tidak semua alat menyokong itemref, disyorkan untuk membuat membuat

Atribut html `placeholder` untuk medan inputJul 24, 2025 am 03:08 AM

Hartanah pemegang tempat adalah fungsi tambahan dalam bentuk HTML untuk petak kotak input. Ia memaparkan teks cahaya apabila kotak input kosong, dan ia secara automatik akan hilang selepas pengguna memulakan input. Cara yang betul untuk menggunakannya ialah menggunakannya sebagai penerangan tambahan dan bukannya menggantikan tag label. Langkah -langkah tertentu adalah: 1. Gunakan label dan pemegang tempat pada masa yang sama, seperti nama pengguna: 2. Elakkan pelabelan item yang diperlukan atau memberikan maklumat utama dengan pemegang tempat; 3. Kawal panjang teks segera untuk memastikan ia mudah; 4. Laraskan gaya melalui CSS untuk memastikan keserasian; 5. Berkenaan dengan senario input dengan format yang jelas seperti e -mel, kotak carian, dan lain -lain, dan kotak kata laluan hendaklah digunakan dengan berhati -hati.

Elemen html `track` untuk kapsyen video dan sarikataJul 24, 2025 am 03:06 AM

Elemen trek adalah tag dalam HTML5 yang digunakan untuk menambah trek teks ke video. Ia menyokong sari kata, tajuk, penerangan, bab, dan metadata, dan biasanya dibuat menggunakan fail format WebVTT. 1. Apabila menggunakannya, anda perlu menambah dan menentukan sifat seperti SRC, Kind, Srclang, Label, dan lain -lain. 2 Format fail WebVTT mesti bermula dengan WebVTT dan termasuk timestamps dan kandungan. 3. Penyemak imbas arus perdana menyokong trek tetapi kawalan gaya terhad. 4. Pelbagai trek boleh ditambah untuk mencapai sokongan berbilang bahasa. Penggunaan trek yang betul boleh meningkatkan kebolehcapaian video dan pengalaman pengguna.

Melaksanakan html `contentedable` untuk editor teks yang kayaJul 24, 2025 am 03:00 AM

TobuildarichtexteditorusingHtml'scontentititableattribute, startByMakingAnelementEditableWithContentediagle = "true", thenHandleFormattingWithjavascriptviaexeccommandordommanipulation.1.useContentEndiWeareNelementAnelementAndandAndArected

Atribut Acara HTML: `onclick`,` onmouseover`, dll.Jul 24, 2025 am 02:59 AM

Atribut acara HTML biasa termasuk Onload, Onchange, Onsubmit, OnMouseout, OnKeyDown dan OnKeyup; OnClick digunakan untuk bertindak balas terhadap tingkah laku klik, dan disyorkan untuk mencapai interaksi melalui panggilan fungsi atau JS mengikat; Onmouseover dan Onmouseout sering digunakan untuk melayang; Adalah disyorkan untuk menggunakan AddEventListener untuk mencapai peristiwa yang mengikat untuk penyelenggaraan dan lanjutan.

Bekerja dengan HTML `Butiran` dan `Ringkasan`Jul 24, 2025 am 02:56 AM

Butiran dan ringkasan tag boleh mencapai kesan lipat dan pengembangan tanpa JavaScript. 1. Butiran digunakan sebagai bekas, dan kandungannya tersembunyi secara lalai; 2. Ringkasan digunakan sebagai tajuk untuk dibuka dan ditutup; 3. Anda boleh menyesuaikan gaya melalui CSS, seperti mengeluarkan anak panah lalai, menetapkan latar belakang dan padding; 4. Berkenaan dengan FAQ, menetapkan panel dan senario lain; 5. Beri perhatian kepada keserasian penyemak imbas dan ketepatan struktur, dan ringkasan mesti diletakkan di dalam butiran.

Memahami atribut HTML `FormAction`Jul 24, 2025 am 02:53 AM

FormAAction adalah atribut dalam bentuk HTML yang menentukan alamat penyerahan bebas butang penyerahan tertentu, yang mengatasi atribut tindakan lalai borang. 1. Ia membolehkan menetapkan laluan penyerahan yang berbeza untuk butang yang berbeza, seperti "Simpan" dan "Pratonton". 2. Apabila menggunakannya, ia ditambah secara langsung ke butang Type = "Hantar", dan sintaks adalah format = "URL". 3. Ia boleh digunakan dalam kombinasi dengan atribut lain seperti Formmethod, Formctype, dan FormTarget untuk mencapai tingkah laku penyerahan yang fleksibel. 4. Keutamaan harta ini lebih tinggi daripada tindakan borang, dan jalannya boleh menjadi jalan relatif atau mutlak. 5. Biasa digunakan untuk banyak

Menggunakan `sasaran =' _ kosong '` selamat di htmlJul 24, 2025 am 02:52 AM

Apabila menggunakan sasaran = "_ kosong", rel = "noopener" mesti ditambah pada masa yang sama untuk mengelakkan kelemahan keselamatan. Sebabnya ialah halaman baru dapat mengawal halaman asal melalui Window.Opener, menyebabkan serangan phishing atau mengalihkan. Cara yang betul untuk menulis adalah:. Jika anda perlu menjejaskan SEO, anda boleh menambah Nofollow: rel = "noopenernofollow". Senario yang memerlukan perhatian khusus termasuk: 1. Pautan yang dikemukakan pengguna; 2. Kandungan yang dihasilkan oleh pemalam pihak ketiga atau CMS; 3. Pengiklanan atau pautan koperasi. Di samping itu, sasaran = "_ kosong" harus digunakan dengan berhati -hati,

See all articles

Alat AI Hot

Undress AI Tool

Gambar buka pakaian secara percuma

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Oguri Cap Build Guide | Musume Derby Pretty

3 minggu yang laluByJack chen

Agnes Tachyon Build Guide | Musume Derby Pretty

3 minggu yang laluByJack chen

Panduan Membina Rumput Wonder | Uma Musume Pretty Derby

2 minggu yang laluByJack chen

Puncak bagaimana untuk emote

4 minggu yang laluByJack chen

Cara Memperbaiki KB5060829 Tidak Memasang & Pepijat Lain Lain

3 minggu yang laluByDDD

Tunjukkan Lagi

Alat panas

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini