騰訊面試官讓我用純css去寫可展開閉合列表，我小腦萎

騰訊面試官讓我用純css去寫可展開閉合列表，我小腦萎縮了

言

面試官：同學考你一個簡單css內容，寫一個可展開列表。
我：笑出了聲。心想真的會出這么簡單的內容哈哈哈！
面試官：同學不能用js哦，如果可以用stylus編寫就更好啦！
我：小腦剎那間萎縮了......

Stylus 是一種 CSS 預處理器。預處理器是一種腳本語言，它擴展了 CSS 的功能，使得編寫 CSS 更加高效、靈活和強大。Stylus 特別之處在于其簡潔而靈活的語法，它允許開發者使用變量、嵌套規則、混合（Mixins）、繼承、操作符、函數以及條件語句等高級功能來編寫樣式代碼。

接下來，讓我們通過一個騰訊的面試題，來更加深層次認識這個stylus語言帶給css的便捷。雖然考察的是純html+css內容，要想純html+css達到完美可卻不簡單。

效果

有三個列表，并且可以展開和收縮，這題目看起來簡單，但是且聽我細細道來，你會發現里面有很多的秘密！

html部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>純css菜單</title>
    <link rel="stylesheet" href="1.css">
</head>

<body>
    <div class="accordion">
        <input type="checkbox" id="collapse1" hidden>
        <input type="checkbox" id="collapse2" hidden>
        <input type="checkbox" id="collapse3" hidden>
        <!-- div替代品 html5語義化標簽 SEO比較重要 -->
        <article>
            <label for="collapse1">列表1</label>
            <p>內容1</p>
            <p>內容2</p>
            <p>內容3</p>
            <p>內容4</p>
        </article>
        <article>
            <label for="collapse2">列表2</label>
            <p>內容1</p>
            <p>內容2</p>
            <p>內容3</p>
            <p>內容4</p>
        </article>
        <article>
            <label for="collapse3">列表3</label>
            <p>內容1</p>
            <p>內容2</p>
            <p>內容3</p>
            <p>內容4</p>
        </article>
    </div>
</body>

</html>

首先我們要進行stylus語言環境的配置，并引入其生成的css文件，配置好之后，我們先看看html部分。

我們設置了三個復選框，并且復選框的id與label標簽的for相對應，可以方便用戶的操作。服務于用戶。
我們用article語義化標簽，這有助于搜索引擎優化（SEO）和屏幕閱讀器更好地理解頁面結構。每個標簽里面放入四段列表。

到此我們html部分就結束啦，我們重點講解一下css部分。

css部分

* {
  margin: 0;
  padding: 0;
}
.accordion {
  width: 300px;
}
.accordion article {
  cursor: pointer;
}
.accordion article + article {
  margin-top: 5px;
}
.accordion label {
  display: block;
  height: 40px;
  padding: 0 20px;
  background-color: #f00;
  cursor: pointer;
  line-height: 40px;
  font-size: 16px;
  color: #fff;
}
.accordion p {
  overflow: hidden;
  padding: 0 20px;
  border: 1px solid #f66;
  border-top: none;
  border-bottom-width: 0;
  max-height: 0;
  line-height: 30px;
  transition: all 500ms;
}
.accordion input:nth-child(1):checked ~ article:nth-of-type(1) p,
.accordion input:nth-child(2):checked ~ article:nth-of-type(2) p,
.accordion input:nth-child(3):checked ~ article:nth-of-type(3) p {
  max-height: 600px;
}
    <生成css>
---------------------------
    <書寫的stylus>
    
    *
    margin 0
    padding 0
.accordion 
    width 300px
    article
        cursor pointer
        & + article
            margin-top 5px
    label
        display block
        height 40px
        padding 0 20px
        background-color red
        cursor pointer
        line-height 40px
        font-size 16px
        color #fff
    p
        overflow: hidden
        padding: 0 20px
        border: 1px solid #f66
        border-top: none
        border-bottom-width 0
        max-height: 0
        line-height 30px
        transition: all 500ms
    input  
        &:nth-child(1):checked ~ article:nth-of-type(1)  p , 
        &:nth-child(2):checked ~ article:nth-of-type(2)  p ,
        &:nth-child(3):checked ~ article:nth-of-type(3)  p 
            max-height:  600px

我們首先清除默認的內外邊距。
對整體的accordion設置寬度。
對article標簽設置鼠標經過變成小手。
通過相鄰兄弟選擇器我們設置第二個和第三個article的margin top 值。
對label標簽我們設置一些基本的樣式。
接下來就是我們最重要的部分，我們這里運用了全體兄弟選擇器，我們以input下第一段為例子說明，后面都是一樣的，我們選中第一個被勾選的復選框，然后通過全體兄弟選擇器找到所有的article，并根據復選框的序號找到對應article的位置，然后將里面的p顯現出來，這一段是我們的核心部分！所以也可以理解為nth-child搭配input，nth-of-type搭配article。

作者：落雪遙夏
鏈接：https://juejin.cn/post/7379873506543616010

tml5移動端常用顯示隱藏菜單的實現，點擊側邊菜單內容展開，這些都是移動端頁面經常用到的

如下：

點擊菜單按鈕后

展開第三級菜單效果如下

實現方法

html結構代碼:

css:

樣式代碼有點多，想要源碼的可以私信找我要

javascript：

天在寫一個關于 html 中 select 下拉元素選擇的動態事件時，發現如果使用 javascript 中的 click 事件的話，會被執行兩次。網上查了一下資料，發現 select 元素下拉選中事件并不適合使用 click 來觸發，而要使用 change 事件。

select元素下拉的click事件

html代碼

<select name="mochu" id="mochu">
 <option value="1">下拉1</option>
 <option value="2">下拉2</option>
 <option value="3">下拉3</option>
 <option value="4">下拉4</option>
</select>
<script>
 $('#mochu').click(function(){
 console.log($(this).val());
 });
</script>

點擊下拉后，輸出信息如下：

通過上圖可以發現，如果 select 元素的下拉菜單使用 click 事件的話，會輸出兩次結果，也就說在展開下拉菜單之前與選擇下拉菜單之后分別觸發了 click 事件，所以 select 下拉選項的觸發事件，不能使用 click，而使用 change 事件。

javascript select 元素的觸發事件

示例代碼

<select name="mochu" onchange="GetVal(this)">
 <option value="下拉1">選項1</option>
 <option value="下拉2">選項2</option>
 <option value="下拉3">選項3</option>
 <option value="下拉4">選項4</option>
</select>
<script>
 function GetVal(obj){
 //代表的是選中項的index索引
 var index=obj.selectedIndex;
 //代表的是選中項的的值
 var val=obj.options[index].value;
 //代表的是選中項的text
 var txt=obj.options[index].text;
 console.log(index);
 console.log(val);
 console.log(txt);
 }
</script>

輸出結果：

在線咨詢

上一篇：Egg.js試水 - 文章增刪改查「前后端分離」
下一篇：如何為你的網站設置404頁面

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商