js選項卡不會寫？JQuery一行程式碼搞定！

fyhm0314發表於2020-12-21
JSjQuery行程

如何使用一行JQuery程式碼實現各大電商網站頭部的層級選項卡效果？

首先我們需要構建我們的html頁面

在這裡我我們構建使用無序列表構建了一個兩層的選項卡 如果需要更多層級 繼續巢狀即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="menu">
        <li>
            <h1>111111</h1>
            <ul> 
                <li>11</li>
                <li>12</li>
                <li>13</li>
            </ul>
        </li>
        <li>
            <h1>222222</h1>
            <ul>            
                <li>21</li>
                <li>22</li>
                <li>23</li>
            </ul>
        </li>
        <li>
            <h1>333333</h1>
            <ul>             
                <li>31</li>
                <li>21</li>
                <li>33</li>
            </ul>
        </li>
        <li>
            <h1>444444</h1>
            <ul>           
                <li>41</li>
                <li>42</li>
                <li>43</li>
            </ul>
        </li>
        <li>
            <h1>555555</h1>
            <ul>
                <li>51</li>
                <li>52</li>
                <li>53</li>
            </ul>
        </li>
    </ul>  
</body>
</html>

然後給它們一些簡單的樣式 方便更清晰的呈現效果

<style>
		*{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #menu{
            list-style: none;
            background-color: royalblue;
        }
        #menu>li>ul{
            display: none;
        }
        #menu>li>ul>li{
            background-color: salmon;
            margin-top: 5px;
        }
</style>

然後引入jquery檔案

<script src="./jquery.js"></script>

最後是寫入jquery部分

$("#menu h1").click(function(){
	$(this).next().slideDown().parent().siblings().find("ul").slideUp()
	})

在這裡使用了上下滑動的效果 使當前點選的li以滑動的效果展開 其他的li自動收起

相關文章