js点击一个列表隐藏其它列表

好的，可以使用以下代码实现：

// 获取所有列表项
const listItems = document.querySelectorAll('.list-item');

// 给每个列表项绑定点击事件
listItems.forEach(item => {
  item.addEventListener('click', () => {
    // 隐藏除当前点击项外的其他列表项
    listItems.forEach(otherItem => {
      if (otherItem !== item) {
        otherItem.style.display = 'none';
      }
    });
  });
});

这段代码会获取所有class为`list-item`的列表项，并为每个列表项绑定一个点击事件。当某个列表项被点击时，会遍历所有列表项，将除当前点击项外的其他列表项隐藏。

相关问题

vue 动态循环列表怎么点击一个隐藏显示

在Vue中实现动态循环列表点击隐藏和显示的功能可以通过给每个列表项设置一个状态属性来实现。具体步骤如下：

1. 在组件的data中添加一个数组用于存储列表数据，例如：list: []。
2. 在页面中使用v-for指令遍历list数组，渲染出每个列表项。
3. 给每个列表项添加一个点击事件，例如：@click="toggle(index)"，其中index为当前列表项的索引。
4. 在组件的methods中定义toggle方法：

methods: {
  toggle(index) {
    this.list[index].isShow = !this.list[index].isShow;
  }
}

5. 在组件的created生命周期钩子函数中初始化每个列表项的isShow属性，默认为false，即隐藏状态：

created() {
  for (let i = 0; i < this.list.length; i++) {
    this.list[i].isShow = false;
  }
}

6. 在列表项的模板中使用v-show指令根据isShow属性的值来控制隐藏和显示：

<div v-for="(item, index) in list" :key="index" @click="toggle(index)">
  <span>{{item.text}}</span>
  <div v-show="item.isShow">内容</div>
</div>

这样就可以实现点击列表项时隐藏或显示对应的内容。

js点击导航栏其中一个隐藏其它的

可以通过以下步骤实现：

1. 给每个需要隐藏的导航元素添加相同的 class 名称，比如 "hide-nav"。
2. 使用 JavaScript 监听点击事件，获取被点击的导航元素。
3. 使用 DOM 操作方法获取所有带有 "hide-nav" class 名称的导航元素。
4. 遍历所有 "hide-nav" 元素，将除被点击的导航元素外其它导航元素的 display 样式设置为 "none"。

以下是示例代码：

HTML 代码：

<nav>
  <a class="hide-nav" href="#">导航 1</a>
  <a class="hide-nav" href="#">导航 2</a>
  <a class="hide-nav" href="#">导航 3</a>
  <a class="hide-nav" href="#">导航 4</a>
</nav>

JavaScript 代码：

// 获取所有带有 "hide-nav" class 名称的导航元素
const hideNavs = document.querySelectorAll('.hide-nav');

// 监听点击事件
document.addEventListener('click', (event) => {
  const clickedNav = event.target;

  // 判断被点击的元素是否为导航元素
  if (clickedNav.classList.contains('hide-nav')) {
    // 遍历所有 "hide-nav" 元素
    hideNavs.forEach((nav) => {
      // 将除被点击的导航元素外其它导航元素的 display 样式设置为 "none"
      if (nav !== clickedNav) {
        nav.style.display = 'none';
      }
    });
  }
});