騰訊面試官讓我用純css去寫(xiě)可展開(kāi)閉合列表，我小腦萎

騰訊面試官讓我用純css去寫(xiě)可展開(kāi)閉合列表，我小腦萎縮了

言

面試官：同學(xué)考你一個(gè)簡(jiǎn)單css內(nèi)容，寫(xiě)一個(gè)可展開(kāi)列表。
我：笑出了聲。心想真的會(huì)出這么簡(jiǎn)單的內(nèi)容哈哈哈！
面試官：同學(xué)不能用js哦，如果可以用stylus編寫(xiě)就更好啦！
我：小腦剎那間萎縮了......

Stylus 是一種 CSS 預(yù)處理器。預(yù)處理器是一種腳本語(yǔ)言，它擴(kuò)展了 CSS 的功能，使得編寫(xiě) CSS 更加高效、靈活和強(qiáng)大。Stylus 特別之處在于其簡(jiǎn)潔而靈活的語(yǔ)法，它允許開(kāi)發(fā)者使用變量、嵌套規(guī)則、混合（Mixins）、繼承、操作符、函數(shù)以及條件語(yǔ)句等高級(jí)功能來(lái)編寫(xiě)樣式代碼。

接下來(lái)，讓我們通過(guò)一個(gè)騰訊的面試題，來(lái)更加深層次認(rèn)識(shí)這個(gè)stylus語(yǔ)言帶給css的便捷。雖然考察的是純html+css內(nèi)容，要想純html+css達(dá)到完美可卻不簡(jiǎn)單。

效果

有三個(gè)列表，并且可以展開(kāi)和收縮，這題目看起來(lái)簡(jiǎn)單，但是且聽(tīng)我細(xì)細(xì)道來(lái)，你會(huì)發(fā)現(xiàn)里面有很多的秘密！

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語(yǔ)義化標(biāo)簽 SEO比較重要 -->
        <article>
            <label for="collapse1">列表1</label>
            <p>內(nèi)容1</p>
            <p>內(nèi)容2</p>
            <p>內(nèi)容3</p>
            <p>內(nèi)容4</p>
        </article>
        <article>
            <label for="collapse2">列表2</label>
            <p>內(nèi)容1</p>
            <p>內(nèi)容2</p>
            <p>內(nèi)容3</p>
            <p>內(nèi)容4</p>
        </article>
        <article>
            <label for="collapse3">列表3</label>
            <p>內(nèi)容1</p>
            <p>內(nèi)容2</p>
            <p>內(nèi)容3</p>
            <p>內(nèi)容4</p>
        </article>
    </div>
</body>

</html>

首先我們要進(jìn)行stylus語(yǔ)言環(huán)境的配置，并引入其生成的css文件，配置好之后，我們先看看html部分。

我們?cè)O(shè)置了三個(gè)復(fù)選框，并且復(fù)選框的id與label標(biāo)簽的for相對(duì)應(yīng)，可以方便用戶的操作。服務(wù)于用戶。
我們用article語(yǔ)義化標(biāo)簽，這有助于搜索引擎優(yōu)化（SEO）和屏幕閱讀器更好地理解頁(yè)面結(jié)構(gòu)。每個(gè)標(biāo)簽里面放入四段列表。

到此我們html部分就結(jié)束啦，我們重點(diǎn)講解一下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>
---------------------------
    <書(shū)寫(xiě)的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

我們首先清除默認(rèn)的內(nèi)外邊距。
對(duì)整體的accordion設(shè)置寬度。
對(duì)article標(biāo)簽設(shè)置鼠標(biāo)經(jīng)過(guò)變成小手。
通過(guò)相鄰兄弟選擇器我們?cè)O(shè)置第二個(gè)和第三個(gè)article的margin top 值。
對(duì)label標(biāo)簽我們?cè)O(shè)置一些基本的樣式。
接下來(lái)就是我們最重要的部分，我們這里運(yùn)用了全體兄弟選擇器，我們以input下第一段為例子說(shuō)明，后面都是一樣的，我們選中第一個(gè)被勾選的復(fù)選框，然后通過(guò)全體兄弟選擇器找到所有的article，并根據(jù)復(fù)選框的序號(hào)找到對(duì)應(yīng)article的位置，然后將里面的p顯現(xiàn)出來(lái)，這一段是我們的核心部分！所以也可以理解為nth-child搭配input，nth-of-type搭配article。

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

tml5移動(dòng)端常用顯示隱藏菜單的實(shí)現(xiàn)，點(diǎn)擊側(cè)邊菜單內(nèi)容展開(kāi)，這些都是移動(dòng)端頁(yè)面經(jīng)常用到的

如下：

點(diǎn)擊菜單按鈕后

展開(kāi)第三級(jí)菜單效果如下

實(shí)現(xiàn)方法

html結(jié)構(gòu)代碼:

css:

樣式代碼有點(diǎn)多，想要源碼的可以私信找我要

javascript：

天在寫(xiě)一個(gè)關(guān)于 html 中 select 下拉元素選擇的動(dòng)態(tài)事件時(shí)，發(fā)現(xiàn)如果使用 javascript 中的 click 事件的話，會(huì)被執(zhí)行兩次。網(wǎng)上查了一下資料，發(fā)現(xiàn) select 元素下拉選中事件并不適合使用 click 來(lái)觸發(fā)，而要使用 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>

點(diǎn)擊下拉后，輸出信息如下：

通過(guò)上圖可以發(fā)現(xiàn)，如果 select 元素的下拉菜單使用 click 事件的話，會(huì)輸出兩次結(jié)果，也就說(shuō)在展開(kāi)下拉菜單之前與選擇下拉菜單之后分別觸發(fā)了 click 事件，所以 select 下拉選項(xiàng)的觸發(fā)事件，不能使用 click，而使用 change 事件。

javascript select 元素的觸發(fā)事件

示例代碼

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

輸出結(jié)果：

在線咨詢

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

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商