js怎么点击一个li展开时收起其他li

实现JavaScript点击一个li展开时收起其他li的方法有以下几种：

使用事件委托、添加和移除类名、遍历其他li元素。
通过jQuery实现类似功能。
利用CSS和JavaScript的结合实现。

1. 使用事件委托、添加和移除类名、遍历其他li元素
在这篇文章中，我们将详细介绍如何使用纯JavaScript实现点击一个li展开时收起其他li的功能。这种方法可以让你的代码更加简洁高效，易于维护。

一、准备HTML结构

首先，我们需要一个基本的HTML结构。假设我们有一个无序列表，其中每个li元素包含一些可以展开和收起的内容：

<ul id="myList">
  <li>
    <div class="title">Item 1</div>
    <div class="content">Content 1</div>
  </li>
  <li>
    <div class="title">Item 2</div>
    <div class="content">Content 2</div>
  </li>
  <li>
    <div class="title">Item 3</div>
    <div class="content">Content 3</div>
  </li>
</ul>

二、添加CSS样式

为了让内容可以展开和收起，我们需要一些基本的CSS样式：

.content {
  display: none;
}
li.active .content {
  display: block;
}

三、编写JavaScript代码

接下来，我们编写JavaScript代码来实现点击一个li展开时收起其他li的功能。

1. 选择列表元素并添加事件监听器

首先，我们选择列表元素，并为每个li元素中的标题部分添加一个点击事件监听器：

document.addEventListener('DOMContentLoaded', () => {
  const list = document.getElementById('myList');
  const items = list.querySelectorAll('li');
  items.forEach(item => {
    const title = item.querySelector('.title');
    title.addEventListener('click', () => {
      toggleItem(item);
    });
  });
});

2. 定义toggleItem函数

接下来，我们定义一个toggleItem函数，这个函数将处理展开和收起的逻辑：

function toggleItem(selectedItem) {
  const list = document.getElementById('myList');
  const items = list.querySelectorAll('li');
  items.forEach(item => {
    if (item !== selectedItem) {
      item.classList.remove('active');
    }
  });
  selectedItem.classList.toggle('active');
}

在这个函数中，我们首先遍历所有的li元素，并将它们的active类名移除。然后，我们为被点击的li元素添加或移除active类名。

四、总结

通过以上步骤，我们实现了点击一个li展开时收起其他li的功能。这种方法不仅简洁高效，而且易于维护和扩展。你可以根据需要进一步优化和定制代码，以满足特定的需求。

2. 通过jQuery实现类似功能
如果你更喜欢使用jQuery，可以利用它简化代码。这是一个使用jQuery实现同样功能的示例：

一、准备HTML结构

<ul id="myList">
  <li>
    <div class="title">Item 1</div>
    <div class="content">Content 1</div>
  </li>
  <li>
    <div class="title">Item 2</div>
    <div class="content">Content 2</div>
  </li>
  <li>
    <div class="title">Item 3</div>
    <div class="content">Content 3</div>
  </li>
</ul>

二、添加CSS样式

.content {
  display: none;
}
li.active .content {
  display: block;
}

三、编写jQuery代码

$(document).ready(function() {
  $('#myList .title').click(function() {
    $('#myList li').removeClass('active');
    $(this).parent('li').addClass('active');
  });
});

在这个jQuery示例中，我们首先等待文档加载完毕，然后为每个li元素中的标题部分添加一个点击事件监听器。每次点击时，我们移除所有li元素的active类名，并为被点击的li元素添加active类名。

3. 利用CSS和JavaScript的结合实现
我们还可以利用CSS和JavaScript的结合实现同样的功能。

一、准备HTML结构

<ul id="myList">
  <li>
    <div class="title">Item 1</div>
    <div class="content">Content 1</div>
  </li>
  <li>
    <div class="title">Item 2</div>
    <div class="content">Content 2</div>
  </li>
  <li>
    <div class="title">Item 3</div>
    <div class="content">Content 3</div>
  </li>
</ul>

二、添加CSS样式

.content {
  display: none;
}
li.active .content {
  display: block;
}

三、编写JavaScript代码

document.addEventListener('DOMContentLoaded', () => {
  const list = document.getElementById('myList');
  const items = list.querySelectorAll('li');
  items.forEach(item => {
    const title = item.querySelector('.title');
    title.addEventListener('click', () => {
      items.forEach(li => li.classList.remove('active'));
      item.classList.add('active');
    });
  });
});

在这个示例中，我们使用纯JavaScript来实现点击一个li展开时收起其他li的功能。每次点击时，我们移除所有li元素的active类名，并为被点击的li元素添加active类名。

四、总结

通过以上三种方法，我们可以轻松实现点击一个li展开时收起其他li的功能。你可以根据自己的需求选择合适的方法，并根据实际情况进行优化和扩展。

在项目团队管理系统中，这种点击展开和收起的功能可以用于展示任务详情、项目进度等信息。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，它们能够提供丰富的项目管理和协作功能，帮助团队提高工作效率。

js怎么点击一个li展开时收起其他li

一、准备HTML结构

二、添加CSS样式

三、编写JavaScript代码

1. 选择列表元素并添加事件监听器

2. 定义toggleItem函数

四、总结

一、准备HTML结构

二、添加CSS样式

三、编写jQuery代码

一、准备HTML结构

二、添加CSS样式

三、编写JavaScript代码

四、总结

相关问答FAQs：