Question

点击查看所有说明后，我应该能够显示以下内容并将查看所有说明内容更改为隐藏所有内容说明，再次点击它时，它应该能够隐藏以下div并将可点击内容更改为＆＃34;查看所有说明＆＃34;

＆＃13;

.hiddenComments {
  display: none;
  padding: 5px;
}
.showComments {
  display: inline-block;
  padding: 5px;
}

＆＃13;

<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>

＆＃13;

Answer 1

如果你更具体，我将能够更好地帮助你。同时看看这个：

$('a').click(function () {
   $('a').text('Hide');

    $(".hiddenComments").addClass('showComments');
    $('.hiddeComments').removeClass('hideComments');
});

Answer 2

不需要css，没有额外的类，只有jquery事件。下次在这里询问之前阅读有关jquery文档的内容，这对你的学习会更好。 https://api.jquery.com/

＆＃13;

$('#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();
    });

＆＃13;

<!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>

＆＃13;

Answer 3

您可以尝试使用：

divElement.childNodes[0].style.display = "inline";//show element
divElement.childNodes[0].style.display = "none";//hide element

第一个元素显示父元素中的第一个元素，第二个元素隐藏它。希望我帮忙！

Answer 4

由于您还没有真正对代码进行任何具体操作，或者您尝试了什么...请查看jQuery hide（）方法。 Jquery Hide Documentation这会让你朝着正确的方向前进

从父div

4 个答案: