JQ点击父级显示与隐藏子集元素

最新推荐文章于 2024-03-21 19:38:18 发布
原创 最新推荐文章于 2024-03-21 19:38:18 发布 · 707 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webview #html #css

这篇博客展示了如何利用jQuery实现点击HTML中的父级元素（dt）来显示或隐藏其后的子级内容（dd）。通过为dt元素添加点击事件，并使用nextUntil方法来选取所有相邻的dd元素，实现内容的切换显示效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0 auto;
                padding: 0;
            }

            .box {
                width: 600px;
                height: 400px;
            }

            .left {
                width: 200px;
                height: 400px;
                float: left;
            }
            .right{
                width: 400px;
                height: 400px;
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left">
                <dl>
                    <dt>常见问题分类</dt>
                    <dd>账号与安全</dd>
                    <dd>账号与安全</dd>
                    <dd>账号与安全</dd>
                    <dd>账号与安全</dd>
                    <dt>常见问题分类</dt>
                    <dd>账号与安全</dd>
                    <dd>账号与安全</dd>
                    <dd>账号与安全</dd>
                    <dd>账号与安全</dd>
                    <dt>常见问题分类</dt>
                    <dd>账号与安全</dd>
                    <dd>账号与安全</dd>
                    <dd>账号与安全</dd>
                    <dd>账号与安全</dd>
                    <dt>常见问题分类</dt>
                    <dd>账号与安全</dd>
                    <dd>账号与安全</dd>
                    <dd>账号与安全</dd>
                    <dd>账号与安全</dd>
                    <dt>常见问题分类</dt>
                    <dd>账号与安全</dd>
                    <dd>账号与安全</dd>
                    <dd>账号与安全</dd>
                    <dd>账号与安全</dd>
                </dl>
            </div>
            <div class="right">
                <div >
                    <h3 style="text-align: center;">常见问题分类</h3>
                    <p style="margin-left: 150px;">--------账号与安号与安全</p>
                    
                    <p style="text-indent:50px;">账号与安全账号与安全账号与安全账号与安全账号与安全账号
                    账号与安全账号与安全与安全账号与安账号与安全账号与安全账号与安全账号与安全
                    账号与安全账账号与安全与安全账号号与安全账号与安全账号与安全账号与安全账号与安全全账号与安全账号与安全账号与安全账号与安全账号与安全账号与安全</p>
                    <h4>一.全与安全账号与</h4>
                    <p style="text-indent:50px;">账号与安全账号与安全账号与安全账号与安全账号与安全账号
                    账号与安全账号与安全与安全账号账号与安全与安全账号与安账号与安全账号与安全账号与安全账号与安全
                    账号与安全账号与安号与安全与安全号与安全与安全全与安全账号账号与安全账号与安全账号与安全账号与安全账号与安全全账号与安全账号与安全账号与安全账号与安全账号与安全账号与安全</p>
                    <p style="text-indent:50px;">账号与安全账号与安全账号与安全账号与安全账号与安全账号
                    账号与安全账号账号与安全与安全账号账号与安全与安全账号与安全与安全账号与安账号与安全账号与安全账号与安全账号与安全
                    账号与安全账号与账账号安全号与安全与安全账号与安全账号与安全账号与安全账号与安全全账号与安全账号与安全账号与安全账号与安全账号与安全账号与安全</p>
                </div>
                
            </div>
        </div>
    </body>
</html>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
    $(function() {
        // 给父级菜单绑定相对应事件
        $("dt").click(function() {
            // 点击可展示子级分类内容
            // 再次点击隐藏子级分类内容
            $(this).nextUntil("dt").toggle();
        })
    })
</script>
 

使用jQuery删除子元素并保留父元素的编程方法
DevPhantom的博客
09-23 112
当我们需要删除父元素的所有子元素时，可以使用jQuery来实现这个功能。下面我将详细介绍如何使用jQuery删除子元素并保留父元素的编程方法。例如，使用类选择器选择具有特定类名的子元素进行删除。在上面的示例中，我们有一个具有id为"parent"的父元素，其中包含了四个子元素。总结一下，使用jQuery删除父元素的子元素并保留父元素，可以使用。运行以上代码后，父元素"parent"将不再包含任何子元素。现在，我们将使用jQuery选择器选择父元素，并使用。如果你只想删除特定类型的子元素，可以使用。
Web-拾贝
热门推荐
oscar999的专栏
03-10 1万+
JavaScript MVC框架PK：Angular、Backbone、CanJS与Emberhttp://www.csdn.net/article/2013-04-25/2815032-A-Comparison-of-Angular-Backbone-CanJS-and-Ember一个好的js method 方法查询的网站， 有browser兼容的介绍http://help.dottoro.co...
父元素visibility：hidden；子元素设置visibility：visible，子元素显示吗
sdasadasds的博客
07-21 1151
父元素visibility：hidden；子元素设置visibility：visible，子元素显示吗
jquery隐藏html中的父级元素,css-在隐藏的父Di中显示子Div
weixin_29505425的博客
06-04 1086
css-在隐藏的父Di中显示子Div在隐藏其父级Div的同时如何显示子Div？ 能做到吗？我的代码如下：.Main-Div{display:none;}This is some Text..This is some Text.. This is some Text..This is some Text..Aki Ross asked 2019-12-24T16:01:31Z11个解决...
jquery jq实现点击显示选中元素的子元素效果
小游
12-10 1161
本文档为个人博客文档系统的备份版本、作者：小游、作者博客：点击访问 废话不多说，直接上代码 $(".nav-item-has-subnav").click(function(){ if($(this).children(".nav-subnav").css("display")==='block'){ $(this).children(".nav-subnav").css("display","none"); }else{ $(this).children(".nav-subnav").cs.
jQuery 子节点的隐藏与展示
SeaWolf-S的博客
10-11 1434
jQuery 子节点的隐藏与展示,单击父节点，如果子节点隐藏，则展示；如果子节点展示，则隐藏。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> ul{ list-style: n...
解决jquery无法找到其他父级子集问题的方法_.docx
10-10
例如，当点击父级元素时，给当前点击的元素添加一个类（如`chencked`），同时移除其他同级元素的该类，以此来实现高亮和显示子级元素的效果。 ```javascript // 点击管理父级显示子级管理项 $('.com-left dd')....
css+js+jq实训笔记
weixin_42757570的博客
07-02 1540
css+js+jq实训笔记css第一天css第二天css第三天css第四天css第五天css第六天js第一天js第二天js第三天js第四天js第五天js第六天jq第一天jq第二天jq第三天 css第一天 1、平时有空多记单词（很多新单词） 2、用谷歌浏览器调试代码 3、多看看公众号和网站（对面试有很大的帮助，也可以帮助了解前端） 4、爱果果（可以去玩一下） 5、egret白鹭科技（游戏开发） 6、小程序API，要学会读懂文档、手册 7、学习PS 8、提高自己的审美 9、计算机网络、数据结构 考研408 10
JQuery知识点
胖大xian
01-14 340
JQuery一、jquery介绍二、jquery加载三、jquery选择器四、jquery样式操作五、绑定click事件六、jquery特殊效果七、jquery链式调用八、jquery动画九、尺寸相关、滚动事件十、jquery属性操作十一、jquery循环十二、jquery事件十三、事件冒泡十四、事件委托十五、jquery元素节点操作十六、滚轮事件与函数节流十七、json十八、ajax与jsonp十九、本地存储二十、jqueryUI 一、jquery介绍 jQuery是目前使用最广泛的javascript函
第九章：关于Jquery库
xiangchi7的博客
11-29 475
文章目录第一节：关于Jquery 第一节：关于Jquery jQuery是一个快速、简洁的JavaScript框架，是一个优秀的JavaScript代码库（或JavaScript框架）。jQuery即倡导写更少的代码，做更多的事情。“write Less，Do More”.它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计...
JS 隐藏、还原 HTML标签 父元素下的某个子元素 特定操作时隐藏指定元素
丶扁扁的糖是扁的 的博客
01-21 1000
该图是配合自定义 中心线组件 实现的拖拽时隐藏右侧表格功能，解决表格数据量大拖拽时不流畅的问题 let box = document.getElementsByClassName(classNames.box)?.[0] //获取父元素 //暂时移除元素 Array.from(box.children).map((node) => { node.id === 'right-view' && (node.style.display = 'none') }) //还原刚...
子绝父相 元素的显示与隐藏
m0_63285774的博客
11-28 510
写华为官网时的几个问题 子绝父相 相对定位：元素移动位置时是相对于原来的位置移动的，它在移动后会继续保留原来的位置。 绝对定位：在元素移动时是相对于他的父级移动的，如果没有祖先元素或者祖先元素没有定位，就会以浏览器为准移动，绝对定位移动后不占有原来的位置。 因为子盒子了绝对定位后不在占有原来的位置，可以放到父盒子里的任意一个地方。在布局时父盒子需要占有位置，而父盒子加了相对定位时不会脱离标准流还占有原来的位置所以父盒子只能添加相对定位。所以在布局时经常会用到子绝父相。 ...
点击父组件按钮 显示子组件_按钮设计用户界面组件系列
weixin_26715991的博客
09-15 745
点击父组件按钮 显示子组件 重点 (Top highlight)In order to design the right interactions, we need to look back at the history and origins of physical pushbuttons, a direct predecessor of the UI component so heavily ...
Vue 点击父组件显示子组件，反之隐藏子组件，显示父组件。
Ching | Blog
11-12 3986
问题： 一开始父组件显示，子组件隐藏。 点击父组件按钮，父组件隐藏自身，子组件显示。 点击子组件按钮，子组件隐藏，父组件显示 解决办法： 父组件引入子组件，并注册，绑定相关变量和值。 父组件下的代码 showTable为隐藏显示整个父组件 引入子组件，并注册子组件 showList为隐藏显示整个子组件 声明需要使用或传递的变量 子组件上绑定showList，初始值为false，即为隐藏子组件。同时双向绑定showList该值，并绑定一个方法parEvn...
jquery实现点击父类中的子类下的子类a，控制父类下的子类b的变换
WhoWrongsWhere的专栏
06-10 2892
$(document).ready(function(){ $(".b").hide(); //给所有的父类ul添加事件 $(".a").click(function(){ $(">.b",$(this).parent().parent()).toggle(); }); });
jquery——控制指定几个子元素隐藏
月来better
03-10 415
jquery——控制指定几个子元素隐藏
点击某元素之外的地方，隐藏该元素，点击自身不受影响(jQuery)
frdsf123的博客
03-21 709
点击一个登录按钮，弹出登录框，该登录框的背景铺满网页（登录框是背景的子元素），点击登录框之外的背景，隐藏该登录框与背景，点击自身不受影响。
JS实现多级栏目隐藏、显示功能（主要用递归方法隐藏主栏目所有的子栏目及子栏目的子栏目）
mytianao的博客
05-06 807
当栏目存在多级时，当点击主栏目，只会隐藏它的一级子栏目，使用递归法，就可以隐藏主栏目所有的子栏目。 //当点击某一栏目时，关闭或显示它的所有子栏目，注意：关闭时是关闭它的子栏目及子栏目的子栏目。 $("span.typcn").click(function () { var arr =[];//定义一个空数组存放所有子栏目id var id =$(this...
jquery的hide()方法，隐藏父容器，子元素也被隐藏的原因
永生
06-06 1863
[list] [*]如下代码，点击修改按钮时，修改按钮也一起隐藏掉了； [*]后来将class="hide btn btnT"中的hide去掉，再将class="show btn btnT overlay_text"中的show去掉，一切正常； [/list] [code="java"] ...
el-cascader 点击父级子集无法正常回显
最新发布
09-11
如果你遇到了在使用 el-cascader 时点击父级子集无法正常回显的问题，可能的原因和解决方法如下： 1. 确保数据格式正确：el-cascader 需要正确格式的数据源才能正常工作。确保你提供的数据是一个数组，每个元素包含...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值