js ul li 收缩怎么写

JavaScript实现ul li收缩功能的方法

在网页开发中，使用JavaScript对HTML元素进行操作是非常常见的需求。实现ul li元素的收缩功能可以通过JavaScript、CSS和HTML的结合来完成。具体来说，我们可以通过添加和删除CSS类来控制列表项的显示和隐藏。以下是一个具体的实现方法：

一、HTML结构

首先，我们需要一个基本的HTML结构来展示我们的列表。假设我们有一个嵌套的无序列表（ul），每个列表项（li）可能包含子列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <ul class="parent">
        <li>
            Item 1
            <ul>
                <li>Sub-item 1.1</li>
                <li>Sub-item 1.2</li>
            </ul>
        </li>
        <li>
            Item 2
            <ul>
                <li>Sub-item 2.1</li>
                <li>Sub-item 2.2</li>
            </ul>
        </li>
    </ul>
    <script src="script.js"></script>
</body>
</html>

二、CSS样式

接下来，我们需要一些基本的CSS样式来控制子列表的显示和隐藏。我们将使用CSS类来实现这一点。

/* styles.css */
ul {
    list-style-type: none;
    padding-left: 20px;
}
ul ul {
    display: none; /* Initially hide the sub-lists */
}
ul .expanded > ul {
    display: block; /* Show the sub-list when the parent li is expanded */
}
ul .toggle {
    cursor: pointer; /* Change cursor to pointer for clickable items */
}

三、JavaScript逻辑

最后，我们需要编写JavaScript代码来实现点击事件的处理。当用户点击一个列表项时，我们将切换其子列表的显示状态。

// script.js
document.addEventListener('DOMContentLoaded', function() {
    // Select all list items that have sub-lists
    var toggles = document.querySelectorAll('.parent > li');
    toggles.forEach(function(toggle) {
        // Add a class to make it clear that the item is clickable
        toggle.classList.add('toggle');
        // Add a click event listener to each list item
        toggle.addEventListener('click', function() {
            // Toggle the 'expanded' class on the clicked item
            toggle.classList.toggle('expanded');
        });
    });
});

四、解释

HTML部分：我们创建了一个简单的嵌套无序列表。每个顶级列表项都有一个子列表。
CSS部分：我们定义了基本的样式，其中包括默认隐藏所有子列表，并在父列表项被点击时显示子列表。
JavaScript部分：我们使用DOMContentLoaded事件确保在HTML文档完全加载和解析后才运行脚本。我们选择所有顶级列表项，并为每个列表项添加一个点击事件监听器。当用户点击一个列表项时，我们切换该项的expanded类，从而控制子列表的显示和隐藏。

通过这种方法，我们可以实现一个简单的ul li收缩功能，使得网页更加动态和交互性。这种方法不仅简单易行，而且非常灵活，可以根据实际需求进行扩展和定制。

js ul li 收缩怎么写

一、HTML结构

二、CSS样式

三、JavaScript逻辑

四、解释

相关问答FAQs：