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

您可以使用JavaScript来实现这一功能。首先，您需要为所有要隐藏的列表添加一个共同的类名，例如"hide-list"。然后，您可以使用以下代码来隐藏除当前点击的列表之外的所有列表：

// 获取所有列表
var lists = document.querySelectorAll('.hide-list');

// 给每个列表添加点击事件
for (var i = 0; i < lists.length; i++) {
  lists[i].addEventListener('click', function() {
    // 隐藏除当前点击的列表之外的所有列表
    for (var j = 0; j < lists.length; j++) {
      if (lists[j] !== this) {
        lists[j].classList.add('hidden');
      }
    }
  });
}

在这段代码中，我们首先获取所有具有类名"hide-list"的列表。然后，我们为每个列表添加一个点击事件监听器。当用户点击某个列表时，我们遍历所有列表并将除当前点击的列表之外的所有列表添加一个名为"hidden"的类，该类可以通过CSS来隐藏这些列表。

请注意，您需要在CSS文件中创建名为"hidden"的类，并为其设置"display: none;"属性，以确保隐藏这些列表。

相关问题

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';
      }
    });
  }
});