开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

关闭父div和ul on click，共享另一个click容器，但保持不需要的li打开

，可以通过以下步骤实现：

首先，给父div和ul元素添加一个点击事件监听器。当点击父div或ul时，触发该事件。
在事件处理程序中，使用JavaScript代码来控制需要打开和关闭的li元素。
首先，关闭所有不需要的li元素。可以通过遍历所有li元素，并将其样式设置为"display: none;"来实现。
然后，打开需要的li元素。可以通过添加一个特定的类名或样式来显示需要打开的li元素。
最后，将点击事件传递给另一个click容器。可以通过调用该容器的点击事件处理程序来实现。

下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <div id="parentDiv">
    <ul id="list">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
  
  <div id="clickContainer">
    <button id="clickButton">Click Me</button>
  </div>

  <script>
    // 获取父div和ul元素
    var parentDiv = document.getElementById("parentDiv");
    var list = document.getElementById("list");

    // 给父div和ul元素添加点击事件监听器
    parentDiv.addEventListener("click", function() {
      // 关闭所有不需要的li元素
      var liElements = list.getElementsByTagName("li");
      for (var i = 0; i < liElements.length; i++) {
        liElements[i].classList.add("hidden");
      }
      
      // 打开需要的li元素
      // 这里假设需要打开第一个li元素
      liElements[0].classList.remove("hidden");
    });

    // 获取click容器和按钮元素
    var clickContainer = document.getElementById("clickContainer");
    var clickButton = document.getElementById("clickButton");

    // 将点击事件传递给另一个click容器
    parentDiv.addEventListener("click", function(event) {
      clickButton.click();
    });
  </script>
</body>
</html>

在上述示例代码中，当点击父div或ul元素时，会关闭所有不需要的li元素，并打开需要的li元素。然后，通过调用按钮的点击事件来传递点击事件给另一个click容器。

请注意，这只是一个示例代码，具体实现方式可能因具体情况而异。根据实际需求，你可以根据自己的项目要求进行相应的修改和调整。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

25个 Vue 技巧，开发了5年了，有些竟然还是第一次见！

学习成为一个更好的Vue开发者并不总是关于那些需要花时间和精力才能掌握的大概念。掌握一些技巧和窍门，可以让我们的编程生活变得更容易--没有大量重复的工作。

01

25个 Vue 技巧，开发了5年了，才知道还能这么用

学习成为一个更好的Vue开发者并不总是关于那些需要花时间和精力才能掌握的大概念。掌握一些技巧和窍门，可以让我们的编程生活变得更容易--没有大量重复的工作。

04

面试官：什么是js中的事件流以及事件模型？

我们先从字面意义上理解，事件我们已经知道了是什么，那流呢？我们看看百度对于流的解释

01

前端jQuery炫酷效果

由于此处代码实现过于复杂，css和js功能实现代码量较多，公众号文章字数有所限制，所以此处将两个重要的功能实现即可，有了这两个例子，其他的都可以做出来了，至于网页的美化这些到是简单许多。

03

jQuery 事件注册、事件处理

其他事件和原生基本一致。比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等

02

前端-日常笔记（个人使用）

对于element-UI还有ant-design-vue里面的组件除了api修改样式之外还可以根据源码修改组件样式。

00

javascript事件流的原理

事件是用户或浏览器自身执行的某种动作，如click,load和mouseover都是事件的名字。

01

深入理解 DOM 事件机制

本文主要介绍 DOM 事件级别、DOM 事件模型、事件流、事件代理和 Event 对象常见的应用，希望对你们有些帮助和启发！

05

JavaScript面试问题：事件委托和this

JavaScript不仅门槛低，而且是一门有趣、功能强大和非常重要的语言。各行各业的人发现自己最混乱的选择是JavaSscript编程语言。由于有着各种各样的背景，所以不是每个人都对JavaScript及其基本原理有广泛的认识。通常来书，除非你去参加工作面试才会去思考为什么或者怎么做，否则JavaScript只是你工作的内容。这个系类的目标是深入探讨JavaScript的一些概念和理论。主题来自于 Darcy Clarke的JavaScript典型面试问题列表。希望你不仅仅是为了答案而阅读完这篇文章，每一

05

Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页

$("#tab-a-" + options.menuID).click(); // 选中打开的tab

02

事件高级

eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。

02

7 个有用的 Vue 开发技巧

随着组件的细化，就会遇到多组件状态共享的情况， Vuex 当然可以解决这类问题，不过就像 Vuex 官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是 vue.js 2.6 新增加的 Observable API ，通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。

03

【Vuejs】242-7个有用的Vue开发技巧

随着组件的细化，就会遇到多组件状态共享的情况， Vuex当然可以解决这类问题，不过就像 Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它。

02

jQuery 事件注册和事件处理

语法: element.事件(function(){}) $ ("div"). click (function(){事件处理程序 } 其他事件和原生基本-致。比如mouseover. mouseout. blur. focus. change. keydown. keyup. resize. scroll 等

04

【实战】Vue.js 图标选择组件开发

最近项目中在做一个自定义菜单需求，其中有一个为菜单设置小图标的功能，就是大家常见的左侧菜单

01

JQuery高级

列一个变量，存储正则规则，用这个变量去test某个数据-----匹配True和不匹配False

05

vue2.0知识点汇总

Vue简介数据流 Vue实例对象 vue常用指令 class结合v-bind使用 methods 和 v-on的使用 v-on高级用法 v-for的使用简单学生添加删除案例父子组件使用父传子父组件向自组件传递数据子组件向父组件通信vuebus vue高级 vue过滤器获取DOM元素 vue-router 命名路由 router-link 参数传递编程式导航原生监听锚点值改变重定向和404 多视图模式嵌套路由 vue-resource 了解 axios的使用 Vue简介 2014年诞生，

07

Vue3.2 中的 Setup 语法糖,保证你看的明明白白！

vue3.2 到底更新了什么？根据原文内容的更新的内容主要有以下 5 块： 1.：服务端渲染优化。@vue/server-renderer包加了一个ES模块创建，与Node.js解耦，使在非Node环境用@vue/serve-render做服务端渲染成为可能，比如(Workers、Service Workers) 2.New SFC Features：新的单文件组件特性 3.Web Components：自定义 web 组件。这个我们平时很少用到，但是应该知道 4.Effect Scope API：e

04

一篇文章让你轻松了解 Vue3.2 中的 Setup 语法糖

vue3.2 到底更新了什么？根据原文内容的更新的内容主要有以下 5 块： 1.SSR：服务端渲染优化。@vue/server-renderer包加了一个ES模块创建，与Node.js解耦，使在非Node环境用@vue/serve-render做服务端渲染成为可能，比如(Workers、Service Workers) 2.New SFC Features：新的单文件组件特性 3.Web Components：自定义 web 组件。这个我们平时很少用到，但是应该知道 4.Effect Scope A

03

Reactjs vs. Vuejs

这里要讨论的话题，不是前端框架哪家强，因为在 Vue 官网就已经有了比较全面客观的介绍，并且是中文的。上图是二月份前端框架排名，React 位居第一，Vue 排名第三。还清晰记得，16 年十月份

00

Web APIs第三天

DOM节点操作重绘与回流 1. DOM节点 DOM节点: DOM树里每一个内容都称之为节点 1. 节点类型: 元素节点 • 所有的标签比如 body、 div • html 是根节点属性节点 • 所有的属性比如 href 文本节点 • 所有的文本重点记住元素节点, 可以更好的让我们理清标签元素之间的关系 1. 查找节点 1.查找父节点: parentNode 属性, 返回最近一级的父节点找不到返回为null

05

JS事件冒泡及阻止

当一个元素接收到事件的时候，会把他接收到的事件传给自己的父级，一直到window，当然其传播的是事件，绑定的执行函数并不会传播，如果父级没有绑定事件函数，就算传递了事件，也不会有什么表现，但事件确实传递了。事件冒泡的原因是事件源本身可能没有处理事件的能力，即处理事件的函数并未绑定在该事件源上。它本身并不能处理事件，所以需要将事件传播出去，从而能达到处理该事件的执行函数。

02

Vue 中 JSX 的基本用法

首先需要约定一下，使用JSX组件命名采用首字母大写的驼峰命名方式，样式可以少的可以直接基于vue-styled-components写在同一个文件中，复杂的建议放在单独的Styles.js文件中，当然也可以不采用CSS-IN-JS的方式，使用Less/Sass来写，然后在文件中import进来。

02

Vue 组件（二）：父子组件通信

子组件是不能直接访问父组件中的数据的，但有时候父子组件之间需要进行数据交互，这就涉及到了父子组件通信的问题。简单来说，父组件向子组件通信是通过 props 进行的，而子组件向父组件通信则是通过自定义事件进行的。

01

详解vue组件三大核心概念

本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件，可以从这三个部分展开，它们可以帮助你快速了解一个组件的所有功能。

03

09Vue.js快速入门-Vue入门之Vuex实战

根据用户输入的文本，撰写一篇技术文章的摘要，总结文章的核心内容并给出相关建议和结论。

09

【Vue 进阶】从 slot 到无渲染组件

插槽（slot）通俗的理解就是“占坑”，在组件模板中占有位置，当使用该组件的时候，可以指定各个坑的内容。也就是我们常说的内容分发

02

常见react面试题（持续更新中）

每个React组件强制要求必须有一个 render()。它返回一个 React 元素，是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素，则必须将它们组合在一个封闭标记内，例如 <form>、<group>、

等。此函数必须保持纯净，即必须每次调用时都返回相同的结果。

02

前端一面常见vue面试题合集_2023-03-01

这种方法是 Vue 组件的基础，相信大部分同学耳闻能详，所以此处就不举例展开介绍。

03

jq使用建议

我们在一些陈旧或者传统mvc的项目中还是会经常使用jq，但是由于对jq api或者核心思想不熟悉，导致我们的某些写法并不是特别好，这里会摘录一些一些并给出大家更好的写法建议。

01

JS基础第四课、JQ基础第一课（BOM、JQuery框架）

（1）JavaScript库：一个封装好的特定的集合（方法和函数），该库里封装了很多定义好的函数，支持js的常规操作以及一些扩展

01

事件高级

eventTarget . addEventListener (type, listener[, useCapture] )

04

C1能力认证训练题解析 _ 第四部分 _ Web进阶「建议收藏」

（2）在ul中的最后一个li元素后添加一个新的li元素，li元素文字内容为input元素的输入值，请补全横线处代码（依次填写答案，使用中文逗号「，」隔开）

02

Vue（下）

日常开发中，通常设置一个app组件作为主组件（相当于单文件组件的App.vue）：

01

jQuery 事件(三) 事件的绑定和解绑、对象的使用、自定义事件

之前学的鼠标事件，表单事件与键盘事件都有个特点，就是直接给元素绑定一个处理函数，所有这类事件都是属于快捷处理。翻开源码其实可以看到，所有的快捷事件在底层的处理都是通过一个”on”方法来实现的。jQuery on()方法是官方推荐的绑定事件的一个方法基本用法：.on( events ,[ selector ] ,[ data ] ) 最常见的给元素绑定一个点击事件，对比一下快捷方式与on方式的不同

03

「面试常问」系统理解浏览器之事件机制

在早期 IE 和 Netscape 团队在开发第四代浏览器的时候，遇到一个问题：当点击一个按钮的时候，是应该先处理父级的事件呢？还是应该先处理按钮的事件呢？IE 和 Netscape 给出了 2 种完全相反的答案，IE 提出事件冒泡的概念，而 Netscape 则支持事件捕获。

02

vuejs中的组件以及父子组件间通信传值

您将在本文当中了解到,往网页中添加数据,从传统的dom操作过渡到数据层操作,实现同一个目标,两种不同的方式.以及什么是组件,如何定义和使用组件,父子组件之间如何进行简单的通信传值...

01

2023前端vue面试题汇总_2023-02-27

有五种，分别是 State、 Getter、Mutation 、Action、 Module

03

17 vue 组件化基础

这是动态注册的组件。其中todo-item是组件名称。组件名称将在消费处用作标签名。组件的使用如下所示：

02

前端day16-JS(WebApi)学习笔记（事件补充、事件冒泡与捕获）

var code = e.keyCode || e.charCode || e.which;

00

Vue.js组件

组件: 顾名思义, 也就是组成的部件, 即整体的组成部分这个组成部分是可以缺少的,但是其存在的意义是无可替代的这个组成部分也是可以复用的全局方法一: 大致可以分成三步 1.在我们引入vue.js之后,Vue会被注册为一个全局对象,我们使用对象本身的方法进行组件的创建 ------使用Vue这个全局对象的component方法进行全局注册一个组件

04

vue2.5入门（推荐，差代码）原

课程地址：https://www.imooc.com/learn/980 教程：https://cn.vuejs.org/v2/guide 放在头部，避免页面出现抖屏挂载点下面是原生模板 <

02

【前端】详解JavaScript事件代理（事件委托）

事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。

01

vue3之Composition API详解

没有Composition API之前vue相关业务的代码需要配置到option的特定的区域，中小型项目是没有问题的，但是在大型项目中会导致后期的维护性比较复杂，同时代码可复用性不高。Vue3.x中的composition-api就是为了解决这个问题而生的

01

浅谈JavaScript

jQuery是对JavaScript的封装，它是免费、开源的JavaScript函数库，jQuery极大地简化了JavaScript编程。

03

jquery 使用方法

jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。对于网页开发者来说，学会jQuery是必要的。因为它让你了解业界最通用的技术，为将来学习更高级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。

01

Vue创建项目及基本语法一

本文档仅作为个人学习笔记、详细内容可以查看官网文档，官方文档有更详细的使用说明及案例

02

事件高级

给元素添加事件，称为注册事件或者绑定事件。注册事件有两种方式：传统方式和方法监听注册方式

01

webapi(三) -节点

语法：父元素.childNodes 查找所有的子节点（子节点包含文本节点，注释节点，标签节点）

02

五个特性，让你升级React

本系列文章主要将总结React从15.x升级到v16.x所需要注意的内容，本文则主要总结为什么要升级到v16.x，v16.x的一些新特性，主要内容包括：

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭