快捷導(dǎo)航

JavaScript實(shí)現(xiàn)下拉列表效果

更新時(shí)間：2022年09月14日 10:20:49 作者：編程的牛牛

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)下拉列表效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)下拉列表效果的具體代碼，供大家參考，具體內(nèi)容如下

這一次寫了一個(gè)比較簡(jiǎn)單的下拉列表的實(shí)現(xiàn)，點(diǎn)擊出現(xiàn)列表內(nèi)容，再次點(diǎn)擊列表消失，研究了很久，發(fā)現(xiàn)這種js寫法確實(shí)比較好用。先看一下效果。

直接上代碼，js是主要寫的部分，css是隨意調(diào)試的，不過(guò)這個(gè)寫法要用到css。

1、HTML部分的代碼

<body>
<!--最外面的一層-->
<div class="outer">
<!-- ? ?里面的-->
<div class="inner">
<h2>第一</h2>
? ? <ul>
? ? ? ? <li>a</li>
? ? ? ? <li>b</li>
? ? ? ? <li>c</li>
? ? </ul>
</div>

<div class="inner">
? ? <h2>第二</h2>
? ? <ul>
? ? ? ? <li>1</li>
? ? ? ? <li>2</li>
? ? ? ? <li>3</li>
? ? </ul>
</div>

<div class="inner">
? ? <h2>第二</h2>
? ? <ul>
? ? ? ? <li>4</li>
? ? ? ? <li>5</li>
? ? ? ? <li>6</li>
? ? </ul>
</div>

? ? <div class="inner">
? ? ? ? <h2>第二</h2>
? ? ? ? <ul>
? ? ? ? ? ? <li>7</li>
? ? ? ? ? ? <li>8</li>
? ? ? ? ? ? <li>9</li>
? ? ? ? </ul>
? ? </div>


<!-- ? ?里面的-->
</div>
<!--最外面一層-->
</body>

2、css部分的代碼

?.outer{
? ? ? ? ? ? margin: 0 auto;
? ? ? ? ? ? width: 500px;
? ? ? ? ? ? height: 600px;
? ? ? ? ? ? border: 1px solid red;
? ? ? ? }
? ? ? ? .outer .inner{
? ? ? ? ? ? width: 500px;
? ? ? ? ? ? border: 1px solid red;

? ? ? ? }
? ? ? ? .outer .inner ul{
? ? ? ? ? ? list-style: none;
? ? ? ? ? ? border: 1px solid fuchsia;
? ? ? ? }
? ? ? ? h2{
? ? ? ? ? ? border: 1px solid blueviolet;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? display: flex;
? ? ? ? ? ? justify-content: center;
? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? background-color: #74a400;
? ? ? ? ? ? margin: 0;
? ? ? ? }
? ? ? ? ul{
? ? ? ? ? ? display: none;
? ? ? ? ??

? ? ? ? }
? ? ? ??
??
? ? ? ? 這里.ul是HTML里面沒(méi)有的，要通過(guò)js來(lái)添加
? ? ? ? .ul{
? ? ? ? ? ? display: block;
? ? ? ? ? ? background-color: cornflowerblue;
? ? ? ? ? ? margin: 0;
? ? ? ? }
? ? ? ? ul li{
? ? ? ? ? ? border: 1px solid cornflowerblue;
? ? ? ? ? ? background-color: darkgray;
? ? ? ? ? ? display: flex;
? ? ? ? ? ? justify-content: center;
? ? ? ? ? ? margin-left: -42px;
? ? ? ? ? ? cursor: pointer;

? ? ? ? }

3、最重要的js代碼部分

window.onload = function () {
? ? ? ? // ? ?獲取h2與ul
? ? ? ? ? ? var h2 = document.getElementsByTagName("h2");
? ? ? ? ? ? var ul = document.getElementsByTagName("ul");
? ? ? ? ? ? //對(duì)所有的h2綁定一個(gè)點(diǎn)擊事件
? ? ? ? ? ? for (let i = 0; i <h2.length ; i++) {
? ? ? ? ? ? ?h2[i].index = i;
? ? ? ? ? ? ?h2[i].onclick = function () {
?? ??? ??? ??? ?//綁定的事件是如果和h2在同一級(jí)的ul沒(méi)有classname的話，就給他的classname取名為ul，如果有的話，就給他的classname置為空。
?? ??? ??? ??? ?//通過(guò)css代碼可以看到有一個(gè).ul的部分是不起作用的，因?yàn)閖s還沒(méi)有給相應(yīng)的h2的classname改變，當(dāng)點(diǎn)擊h2的時(shí)候才會(huì)改變。
?? ??? ??? ??? ?//這個(gè)寫法就是不直接改變css樣式內(nèi)容，而是通過(guò)改變名字來(lái)實(shí)現(xiàn)樣式的轉(zhuǎn)變，這樣的話，一個(gè)樣式就能被用好多次，不用重復(fù)一直寫樣式。
? ? ? ? ? ? ? ? ?if (ul[this.index].className == ""){
? ? ? ? ? ? ? ? ? ? ?ul[this.index].className = "ul";
? ? ? ? ? ? ? ? ?}else {
? ? ? ? ? ? ? ? ? ? ?ul[this.index].className = "";
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ?}
? ? ? ? ? ? }
? ? ? ? }

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: