css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单

为了实现可折叠导航菜单，需要使用CSS3和jQuery。下面是实现可折叠导航菜单的完整攻略。

使用HTML结构元素和CSS样式创建可折叠的导航菜单

使用HTML结构元素创建一个列表，其中每个列表项代表一个导航菜单条目。例如：

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

使用CSS样式将导航菜单条目隐藏，并添加一个标识符，表示该条目可以折叠。例如：

ul {
    list-style-type: none;
}

li {
    display: none;
}

li.collapsible {
    display: block;
}

添加一个按钮，用于展开和折叠导航菜单。例如：

<button id="nav-toggle">Toggle Navigation</button>

使用jQuery在按钮上添加一个单击事件，该事件应该切换导航菜单的可见性。例如：

$('#nav-toggle').click(function() {
    $('li').toggleClass('collapsible');
});

这样，当用户单击按钮时，所有列表项都将显示或隐藏，并且所有具有“collapsible”样式的列表项将折叠或展开。

示例一

下面是一个演示上述方法实现的“可折叠导航菜单”的完整代码示例。

<!doctype html>
<html>
<head>
    <title>Collapsible Navigation Menu</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <style>
        ul {
            list-style-type: none;
        }
        li {
            display: none;
        }
        li.collapsible {
            display: block;
        }
    </style>
</head>
<body>
    <button id="nav-toggle">Toggle Navigation</button>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
    <script>
        $('#nav-toggle').click(function() {
            $('li').toggleClass('collapsible');
        });
    </script>
</body>
</html>

在这个示例中，当用户单击按钮时，所有列表项都将显示或隐藏，并且所有具有“collapsible”样式的列表项将折叠或展开。

示例二

下面是另一个示例，该示例可以同时展开和折叠单个导航菜单项，并且在展开某个导航菜单项时自动关闭其他导航菜单项。

<!doctype html>
<html>
<head>
    <title>Collapsible Navigation Menu</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <style>
        ul {
            list-style-type: none;
        }
        li {
            display: none;
        }
        li.collapsible {
            display: block;
        }
        li.active {
            display: block;
        }
    </style>
</head>
<body>
    <ul>
        <li class="nav-item" data-target="menu-1"><a href="#">Menu 1</a>
            <ul id="menu-1">
                <li><a href="#">Submenu 1</a></li>
                <li><a href="#">Submenu 2</a></li>
                <li><a href="#">Submenu 3</a></li>
            </ul>
        </li>
        <li class="nav-item" data-target="menu-2"><a href="#">Menu 2</a>
            <ul id="menu-2">
                <li><a href="#">Submenu 1</a></li>
                <li><a href="#">Submenu 2</a></li>
                <li><a href="#">Submenu 3</a></li>
            </ul>
        </li>
        <li class="nav-item" data-target="menu-3"><a href="#">Menu 3</a>
            <ul id="menu-3">
                <li><a href="#">Submenu 1</a></li>
                <li><a href="#">Submenu 2</a></li>
                <li><a href="#">Submenu 3</a></li>
            </ul>
        </li>
    </ul>
    <script>
        $('.nav-item').click(function() {
            var id = '#' + $(this).data('target');
            if ($(id).is(':visible')) {
                $(id).slideUp('fast', function() {
                    $(this).closest('.nav-item').removeClass('active');
                });
            } else {
                $('.nav-item .sub-menu').slideUp('fast', function() {
                    $(this).closest('.nav-item').removeClass('active');
                });
                $(id).slideDown('fast', function() {
                    $(this).closest('.nav-item').addClass('active');
                });
            }
        });
    </script>
</body>
</html>

在这个示例中，当用户单击某个导航菜单项时，该项下的子菜单将展开或收起，并且该项的状态将更新为“active”。除此之外，其他已经展开的子菜单将自动收起。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单 - Python技术站