显示和隐藏父 div 的跨度答案

【问题标题】：show and hide span from parent div显示和隐藏父 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 :(
有趣的是，您有多少问题以 “如何...？” stackoverflow.com/help/badges/28/famous-question?userid=158008 开头

标签： javascript jquery css

【解决方案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
其实这不是 Stackoverflow 的重点。也许是另一个堆栈交换站点....但是 SO 是针对特定问题的，而不是广泛的问题
如果你想给他指出一个方向，然后添加评论，而不是答案。