使用JavaScript怎么編寫一個下拉列表功能

發(fā)布時間：2021-01-20 16:37:15 來源：億速云閱讀：188 作者：Leah 欄目：開發(fā)技術(shù)

本篇文章給大家分享的是有關(guān)使用JavaScript怎么編寫一個下拉列表功能，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

1、HTML部分的代碼

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

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

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

 <div class="inner">
  <h3>第二</h3>
  <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;
  }
  h3{
   border: 1px solid blueviolet;
   height: 30px;
   display: flex;
   justify-content: center;
   cursor: pointer;
   background-color: #74a400;
   margin: 0;
  }
  ul{
   display: none;
   

  }
  
 
  這里.ul是HTML里面沒有的，要通過js來添加
  .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 () {
  // 獲取h3與ul
   var h3 = document.getElementsByTagName("h3");
   var ul = document.getElementsByTagName("ul");
   //對所有的h3綁定一個點擊事件
   for (let i = 0; i <h3.length ; i++) {
    h3[i].index = i;
    h3[i].onclick = function () {
 //綁定的事件是如果和h3在同一級的ul沒有classname的話，就給他的classname取名為ul，如果有的話，就給他的classname置為空。
 //通過css代碼可以看到有一個.ul的部分是不起作用的，因為js還沒有給相應(yīng)的h3的classname改變，當點擊h3的時候才會改變。
 //這個寫法就是不直接改變css樣式內(nèi)容，而是通過改變名字來實現(xiàn)樣式的轉(zhuǎn)變，這樣的話，一個樣式就能被用好多次，不用重復(fù)一直寫樣式。
     if (ul[this.index].className == ""){
      ul[this.index].className = "ul";
     }else {
      ul[this.index].className = "";
     }
    }
 }
}

以上就是使用JavaScript怎么編寫一個下拉列表功能，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

使用JavaScript怎么編寫一個下拉列表功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽