显示和隐藏父 div 的跨度
Posted
技术标签:
【中文标题】显示和隐藏父 div 的跨度【英文标题】：show and hide span from parent div 【发布时间】：2015-09-25 12:08:42 【问题描述】：点击查看所有描述，我应该能够显示以下div并将查看所有描述内容更改为隐藏所有描述 当再次点击它时，它应该能够隐藏以下 div 并将可点击的内容更改为 “查看所有描述”
.hiddenComments
display: none;
padding: 5px;
.showComments
display: inline-block;
padding: 5px;
<div class="row outer-part col-md-offset-1">
<div class="col-md-12 TechDiscSelectAll" id="divSelectAll_DRILLING">
<a id="lnkViewAll_DRILLING" class="NoWrap">View All Descriptions</a>
</div>
<div class="row padding-4">
<div class="col-md-12">
<span class="hiddenComments">Sample text;</span>
</div>
</div>
<div class="row padding-4">
<div class="col-md-12">
<span class="hiddenComments">sample text</span>
</div>
</div>【问题讨论】：
我们如何做到这一点？你的意思是你怎么能那样做？你试过什么？我们不仅仅是为您编写代码的服务。我们在这里帮助您理解，但您必须付出一点努力。编辑：我如何对一个拥有近 3k 代表的人说这个？你会认为你现在已经明白这里的事情是如何运作的...... w3schools.com/jquery/jquery_hide_show.asp @wazaaaap 至少发布 jquery 站点文档而不是 w3schools :( 有趣的是，您有多少问题以 “如何...？” ***.com/help/badges/28/famous-question?userid=158008 开头 【参考方案1】：如果您能更具体一些，我将能够更好地帮助您..同时看看这个：
$('a').click(function ()
$('a').text('Hide');
$(".hiddenComments").addClass('showComments');
$('.hiddeComments').removeClass('hideComments');
);
【讨论】：
【参考方案2】：不需要 css，不需要额外的类，只需要 jquery 事件。下次在这里提问之前阅读jquery文档，它会更好地为您的学习。 https://api.jquery.com/
$('#lnkViewAll_DRILLING').click(function()
var $this = $(this);
var text = ($this.text() != 'Hide All Descriptions') ? 'Hide All Descriptions' : 'Show All Descriptions';
$this.text(text);
$(".comments").toggle();
);<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="row outer-part col-md-offset-1">
<div class="col-md-12 TechDiscSelectAll" id="divSelectAll_DRILLING">
<a id="lnkViewAll_DRILLING" class="NoWrap">View All Descriptions</a>
</div>
<div class="row padding-4">
<div class="col-md-12">
<span class="comments">Sample text;</span>
</div>
</div>
<div class="row padding-4">
<div class="col-md-12">
<span class="comments">sample text</span>
</div>
</div>
</div>
</body>
</html>【讨论】：
【参考方案3】：您可以尝试使用：
divElement.childNodes[0].style.display = "inline";//show element
divElement.childNodes[0].style.display = "none";//hide element
第一个显示父元素内的第一个元素，第二个隐藏它。希望我能帮上忙！
【讨论】：
【参考方案4】：由于您没有真正给出任何具体的代码，或者您尝试过的内容。请查看 jQuery hide() 方法。 Jquery Hide Documentation这会让你朝着正确的方向前进
【讨论】：
为什么我被否决了，他问如何，我给了他一个文档链接？如果有什么对他最有帮助的话，因为根本没有细节 我不是反对者，但回答像这个问题这样糟糕的问题只会鼓励 OP，对其他人没有帮助。最好在回答之前要求 OP 改进问题 但是如果用户询问如何在没有设置细节的情况下执行此操作，那么正确方向上的点不应该与任何其他答案一样有效吗？这是社区的问题之一。与其只留下答案，有人觉得有必要说它伤害了答案吗？我叫BS 其实这不是 *** 的重点。也许是另一个堆栈交换站点....但是 SO 是针对特定问题的，而不是广泛的问题 如果你想给他指出一个方向，然后添加评论，而不是答案。以上是关于显示和隐藏父 div 的跨度的主要内容，如果未能解决你的问题，请参考以下文章