如何利用jQuery實(shí)現(xiàn)下拉菜單的多級(jí)展開

小樊
81
2024-10-15 05:26:49
欄目: 編程語言

要使用jQuery實(shí)現(xiàn)下拉菜單的多級(jí)展開，首先確保已經(jīng)在HTML文件中引入了jQuery庫。然后，可以通過以下步驟實(shí)現(xiàn)多級(jí)展開功能：

  1. 在HTML中創(chuàng)建一個(gè)具有多級(jí)結(jié)構(gòu)的下拉菜單：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 多級(jí)下拉菜單</title>
    <style>
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            margin: 5px 0;
        }
        .sub-menu {
            display: none;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <ul>
        <li>菜單1
            <ul class="sub-menu">
                <li>子菜單1-1</li>
                <li>子菜單1-2</li>
                <li>子菜單1-3</li>
            </ul>
        </li>
        <li>菜單2
            <ul class="sub-menu">
                <li>子菜單2-1</li>
                <li>子菜單2-2</li>
            </ul>
        </li>
        <li>菜單3</li>
    </ul>
    <script>
        // 在這里編寫jQuery代碼
    </script>
</body>
</html>
  1. 編寫jQuery代碼以實(shí)現(xiàn)多級(jí)展開功能：
$(document).ready(function() {
    // 當(dāng)點(diǎn)擊一級(jí)菜單時(shí)，展開對(duì)應(yīng)的子菜單
    $('li').on('click', function() {
        // 隱藏所有子菜單
        $('.sub-menu').hide();

        // 獲取當(dāng)前點(diǎn)擊的一級(jí)菜單的子菜單
        var subMenu = $(this).find('.sub-menu');

        // 如果子菜單存在，則展開子菜單
        if (subMenu.length > 0) {
            subMenu.show();
        }
    });

    // 當(dāng)點(diǎn)擊子菜單時(shí)，阻止事件冒泡，以免觸發(fā)一級(jí)菜單的點(diǎn)擊事件
    $('.sub-menu').on('click', function(event) {
        event.stopPropagation();
    });
});

現(xiàn)在，當(dāng)點(diǎn)擊一級(jí)菜單時(shí)，對(duì)應(yīng)的子菜單將展開。點(diǎn)擊子菜單時(shí)，不會(huì)展開其他子菜單。這樣就實(shí)現(xiàn)了使用jQuery實(shí)現(xiàn)的下拉菜單多級(jí)展開功能。

0 踩