javascript - 使用jquery单击加号时如何展开最近的div？

Question

我有一个加号，当用户点击加号时，它将显示在页面加载时不显示的 div。我的意思是我必须在类为 viewMoreStatus 的地方显示 div。

我试过下面的代码，但它不起作用。

$('.expandExtra').click(function(e) {
  e.preventDefault();
  var $this = $(this);
  $(".expandExtra").removeClass('change_sign');
  if ($this.find('.viewMoreStatus').hasClass('show')) {
    $this.removeClass('change_sign');
    $this.find('.viewMoreStatus').removeClass('show');
    $this.parents('.custom_fields').find('editLeadFileStatus').find('viewMoreStatus').slideDown();

  } else {
    $this.addClass('change_sign');
    $this.parents('.custom_fields').find('editLeadFileStatus').find('viewMoreStatus').slideDown();

  }
});

.viewMoreStatus {
  display: none
}

.editLeadFileStatus span.expandExtra::before {
  content: "\f055";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  display: inline-block;
}

.editLeadFileStatus span.expandExtra.change_sign::before {
  content: "\f056";
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">

<div class="custom_fields medication_info" id="custom_fields">

  <div class="row editLeadFileStatus">
    <span class="expandExtra"></span>
    <h2>Testing1</h2>
    <h3>Testing1</h3>
    <div class="viewMoreStatus">hide on page load and display on click</div>
  </div>

  <div class="row editLeadFileStatus">
    <span class="expandExtra"></span>
    <h2>Testing2</h2>
    <h3>Testing2</h3>
    <div class="viewMoreStatus">hide on page load and display on click</div>
  </div>

  <div class="row editLeadFileStatus">
    <span class="expandExtra"></span>
    <h2>Testing3</h2>
    <h3>Testing3</h3>
    <div class="viewMoreStatus">hide on page load and display on click</div>
  </div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Answer 1

您可以使用 show() 和 hide() 执行以下操作

$('.expandExtra').click(function(e) {
  e.preventDefault();
  $('.viewMoreStatus').hide();
  var $this = $(this);
  $(".expandExtra").removeClass('change_sign');
  if ($this.find('.viewMoreStatus').hasClass('show')) {
    $this.removeClass('change_sign');
    $this.find('.viewMoreStatus').removeClass('show');
    $this.parents('.custom_fields').find('editLeadFileStatus').find('viewMoreStatus').slideDown();
    
    $this.siblings('.viewMoreStatus').hide();

  } else {
   
    $this.addClass('change_sign');
    $this.parents('.custom_fields').find('editLeadFileStatus').find('viewMoreStatus').slideDown();
     $this.siblings('.viewMoreStatus').show();

  }
});

.viewMoreStatus {
  display: none
}

.editLeadFileStatus span.expandExtra::before {
  content: "\f055";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  display: inline-block;
}

.editLeadFileStatus span.expandExtra.change_sign::before {
  content: "\f056";
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">

<div class="custom_fields medication_info" id="custom_fields">

  <div class="row editLeadFileStatus">
    <span class="expandExtra"></span>
    <h2>Testing1</h2>
    <h3>Testing1</h3>
    <div class="viewMoreStatus">hide on page load and display on click</div>
  </div>

  <div class="row editLeadFileStatus">
    <span class="expandExtra"></span>
    <h2>Testing2</h2>
    <h3>Testing2</h3>
    <div class="viewMoreStatus">hide on page load and display on click</div>
  </div>

  <div class="row editLeadFileStatus">
    <span class="expandExtra"></span>
    <h2>Testing3</h2>
    <h3>Testing3</h3>
    <div class="viewMoreStatus">hide on page load and display on click</div>
  </div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>