开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

关闭父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容器。

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

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

有帮助

没帮助

相关·内容

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

基于Bootstrap和JQuery实现动态打开和关闭tab页 by:授客 QQ：1033553122 1....> <!...tab“装载”的url * tabContentID tab标签页的页面内容所在的父级元素（div容器） * * @returns {boolean} */ function addTab(options..."#tab-a-" + options.menuID).click(); // 选中打开的tab currentIframID= 'iframe' + options.menuID; } }...+ " >li.active"); if (li_active.attr('id') == li_id) { // 如果关闭的是当前处于选中状态的TAB if (li_active.prev()[0])

7.8K2 0

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

@click.stop阻止父组件的事件发生打开菜单是click.stop的经典应用。原理：在父子标签中如果同时存在点击事件首先会只执行子组件中的事件然后执行父组件的事件。...应用场景：在点击input输入框的时候展示菜单，点击其他部分则关闭菜单。那么在点击菜单部分的时候也算在input框外部，但是此时不能关闭菜单所以要防止关闭菜单。...注意只对父组件起作用不对其他祖先组件起作用代码实例： ... 父级点击函数：toggleMenu（打开菜单）子集点击函数：toggleSubMenu，点击组织toggleMenu发生并且执行toggleSubMenu

1010 0

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

当v-if被打开或关闭时，它将创建并完全销毁该元素。...单个作用域插槽的简写(不需要 template 标签) 限定范围的插槽非常有趣，但为了使用它们，您还必须使用许多模板标记。...-- 槽中没有内容，但这个div 仍然被渲染。糟糕 --> Click me!...有3种主要的 context-aware ，但 Configuration 是我最感兴趣的一种。 1.状态共享当你把一个大的组件分解成多个小的组件时，它们往往仍然需要共享状态。...我们可以存储过滤器、搜索值、模态框是打开还是关闭，或者在列表的哪个位置滚动以完美地实现无限分页。

3.4K4 0

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

当v-if被打开或关闭时，它将创建并完全销毁该元素。...单个作用域插槽的简写(不需要 template 标签) 限定范围的插槽非常有趣，但为了使用它们，您还必须使用许多模板标记。...-- 槽中没有内容，但这个div 仍然被渲染。糟糕 --> Click me!...有3种主要的 context-aware ，但 Configuration 是我最感兴趣的一种。 1.状态共享当你把一个大的组件分解成多个小的组件时，它们往往仍然需要共享状态。...我们可以存储过滤器、搜索值、模态框是打开还是关闭，或者在列表的哪个位置滚动以完美地实现无限分页。

2.5K1 0

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

（2）在同一个页面，数据共享，以键值对的形式存储3、window.localStorage（1）生命周期：永久有效，除非手动删除，关闭也会存在（2）可以多个窗口共享，以键值对的形式存储（3）删除removeItem...).index()（２）获取指定元素：$('元素').eq(index) 1 2 3 $('li').click(function(){ console.log($(this).index());...（１）sibings()：返回其他同级元素对象（２）结合第3点的样式操作：css('样式属性名','属性值') //修改样式方法 1...2 3 $('li').click(function(){ $(this)

1.3K1 0

vue 手写一个时间选择器

> {{item}} .../ul> 2....props 为 value, 子组件传递的事件为input, 因此需在 selectDate 方法中 emit 事件及数据给父组件 selectDate(item) { ......点击页面其他位置收起日历面板原理监听页面的点击事件，检测到有点击事件时关闭面板，但点击组件内容时也会触发点击事件，因此需要在组件内部阻止冒泡。

2.4K2 0

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

) 看一下执行情况可以看到我们在点击btn3时冒泡执行至btn2后就进行了终止七、事件流模型的应用事件委托又叫事件代理，指的是利用事件冒泡原理，只需给外层父容器添加事件...，若内层子元素有点击事件，则会冒泡到父容器上，这就是事件委托，简单说就是：子元素委托它们的父级代为执行事件。...举个例子： 1 2 3 4 5 我们现在有一个这样的列表...，我想监听所有的标签，标签我这里只列了五个，但实际业务中这里有可能会循环出成千上万个标签。...动态监听:使用事件委托可以自动绑定动态添加的元素，即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。

2K1 0

vue2.0知识点汇总

> 哈哈呵呵 `...一个样式：返回字符串（三元表达式和 key和样式的对象清单）多个样式：返回对象（样式做key，true或false做值） {{ stu.name }} <div :class="{'red': true, 'big':...2.0版本后必输设置（性能） <li v-for="(stu, index) in stus" v-bind:key="index...props:['textbody'] } 子组件向父组件通信（vuebus）通过new Vue() 的一个对象，来$on(‘事件名’, fn(prop1, prop1)) 绑定事件 另一个组件引入统一个

6.6K7 0

深入理解 DOM 事件机制

1.优点减少内存消耗，提高性能假设有一个列表，列表之中有大量的列表项，我们需要在点击每个列表项的时候响应一个事件 // 例4 item 1 item n 如果给每个列表项一一都绑定一个函数，那对于内存消耗是非常大的，效率上需要消耗很多性能。...借助事件代理，我们只需要给父容器ul绑定方法即可，这样不管点击的是哪一个后代元素，都会根据冒泡传播的传递机制，把容器的click行为触发，然后把对应的方法执行，根据事件源，我们可以知道点击的是谁，从而完成不同的事...2.如何实现接下来我们来实现上例中父层元素 #list 下的 li 元素的事件委托到它的父层元素上： // 给父层元素绑定事件 document.getElementById('list').addEventListener...，不仅body绑定事件不会触发，与此同时按钮的另一个点击事件也不触发。

2.8K5 0

jQuery 事件注册和事件处理

语法语法: element.事件(function(){}) $ ("div"). click (function(){事件处理程序 } 其他事件和原生基本-致。...事件委派定义是，把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。...是绑定在ul 身上的，但是触发的对象是 ul 里面的小li // $("ul li").click(); $("ul").on("click", "li...div身上的点击事件 $("ul").off("click", "li"); // 2. one() 但是它只能触发事件一次...，这是和前面两种的区别。

4.3K4 0

jQuery 事件注册、事件处理

事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素 $('ul').on('click', 'li', function() { 　　alert('hello...是绑定在ul 身上的，但是触发的对象是 ul 里面的小li // $("ul li").click(); $("ul").on("click", "li...案例：发布微博案例 1.点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul 中。2.点击的删除按钮，可以删除当前的微博留言。 ...代码实现 $(function () { // 1.点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul 中 $...div身上的点击事件 $("ul").off("click", "li"); // 2. one() 但是它只能触发事件一次

3.8K2 0

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

获取元素节点信息常用属性：名称描述 innerHTML 返回元素内包含的所有HTML内容（文本和标签），类型为字符串 parentNode 返回指定节点的父节点 children 返回指定元素的子元素节点集合...（2）获取ul中的第2个li元素，请补全横线处数字。...> 答案：parentNode 观察元素结构可知，div元素为span元素的父级的父级，使用parentNode即可返回指定节点的父节点，父级的父级即为 .parentNode.parentNode...（2）在ul中的最后一个li元素后添加一个新的li元素，li元素文字内容为input元素的输入值，请补全横线处代码（依次填写答案，使用中文逗号「，」隔开）石家庄秦皇岛伊拉克哈尔滨 var item =

2K2 0

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

上述ul有N个子元素li，如果需要响应每一个li的事件，那么常规的方法就是需要给所有的li都单独绑定一个事件监听，写法符合逻辑，但繁琐。...因为li都有一个共同的父元素，而且所有的事件都是一致的，这里我们可以采用要一个技巧来处理，也是常说的”事件委托” 事件没直接和li元素发生关系，而且绑定父元素了。...由于浏览器事件冒泡特性，可以在触发li时把这个事件往上冒泡到ul上，因为ul上绑定事件响应，所以能触发这个动作。事件对象怎么才知道触发的li元素是哪个一个？... //多事件绑定一 $("ul").on('click',function...DOM元素冒泡前的当前触发事件的DOM对象, 等同于this. this和event.target的区别： js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标

4.1K3 0

事件高级

常情况下terget 和 this是一致的，但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），这时候this指向的是父元素，因为它是绑定事件的元素对象...('div'); div.addEventListener('click', function(e) { // e.target 和 this指向的都是div ... abc abc abc ...以上案例：给ul注册点击事件,然后利用事件对象的target来找到当前点击的li ,因为点击li,事件会冒泡到ul上, ul有注册事件,就会触发事件监听器。... // 事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点 var ul = document.querySelector

1.4K2 0

前端jQuery炫酷效果

节点 2、删除节点 3、上下箭头移动节点 // 1：增加按钮单击：获取用户输入的数据，数据放到li节点里面，追加li节点到页面 $('#btn1').click(function...// }) // 父 $('#list').delegate('a', 'click', function(){ // alert...> 案例三：网站注册页面 ?...由于此处代码实现过于复杂，css和js功能实现代码量较多，公众号文章字数有所限制，所以此处将两个重要的功能实现即可，有了这两个例子，其他的都可以做出来了，至于网页的美化这些到是简单许多。...}) $('.pop_con').click(function(){ // 不需要执行显示，也不能隐藏 -- 不能冒泡到document

3.9K3 0

什么是前端架构？

Products Socks 静态式的html如上所示，诚然，保持简介追求“语义化”的标记是我们的首选，但过于简洁的标记或导致样式会自动继承，如果项目规模较小还好，一旦规模较大会导致我们书写CSS...ul > li > ul > li > a { color: blue; } 为了更好的实现标记的可控化，模块化标记是最好的选择，它可以给你带来理想的灵活性和必要的自动化 <nav class...，能用到任何需要的地方，不依赖于不确定的父节点 CSS 类名。...开发人员几乎不需要给标记添加额外的类，或者去掉一个容器 div，或者调整代码的顺序，因为所有的迭代和测试工作都在原型阶段完成了。

7051 0

jQuery基础图文系列

'); console.log(elements.eq(0)); console.log($('li:eq（0）')); )) first()和last()和toArray()...) 数组或返回匹配的元素集合中的html内容 insertAfter() 把匹配的元素插入到另一个指定的元素集合的后面 insertBefore() 把匹配的元素插入到另一个指定的元素集合的签名 prepend.../images/005.jpg"> 玩转Photoshop ... ☆ 最新发布 .../images/005.jpg"> 玩转Photoshop

4.5K1 0

javascript事件流的原理

上面这段html代码中，单击了页面中的元素，在冒泡型事件流中click事件传播顺序为 —》—》—》document 在捕获型事件流中click事件传播顺序为...事件代理的原理用到的就是事件冒泡和目标元素，把事件处理器添加到父元素，等待子元素事件冒泡，并且父元素能够通过target（IE为srcElement）判断是哪个子元素，从而做相应处理。...传统事件处理，为每个元素添加事件处理器，代码如下： View Code 事件代理的处理方式，代码如下： red orange... yellow green blue indigo purple (function...如果新增其他子元素（a,span,div等），直接修改事件代理的事件处理函数即可，不需要重新绑定处理器，不需要再次循环遍历。

1K1 0

jQuery基础系列

'); console.log(elements.eq(0)); console.log($('li:eq（0）')); )) first()和last()和toArray()...) 数组或返回匹配的元素集合中的html内容 insertAfter() 把匹配的元素插入到另一个指定的元素集合的后面 insertBefore() 把匹配的元素插入到另一个指定的元素集合的签名 prepend.../images/005.jpg"> 玩转Photoshop ... ☆ 最新发布 .../images/005.jpg"> 玩转Photoshop

2.6K2 0

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

("click", test,false); btn.removeEventListener("click",test,false) 03-事件冒泡事件冒泡：如果一个元素的事件被触发，那么他的所有父级元素的同名事件也会被依次触发...那么就是click，如果是鼠标移入触发的就是mouseover console.log(e.type); } 事件冒泡好处：如果想给父元素的多个子元素添加事件...，我们可以只需要给父元素添加事件即可，然后通过获取事件源(e.target)就可以得知是哪一个子元素触发了这个事件隔壁老王1 隔壁老王...2 隔壁老王3 隔壁老王4 隔壁老王5 var ul = document.getElementById...("ul1"); //1.如果想给ul中的每一个li标签添加点击事件，以前的做法需要遍历ul的li标签逐个添加 // for (var i = 0; i < ul.children.length

1.8K0 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭