使用jQuery单击加号时如何扩展最近的div? [英] How to expand the nearest div when click on the plus sign using jquery?

问题描述

我有一个加号，当用户单击加号时，它将显示div，它在页面加载时不显示任何内容.我的意思是我必须在类为viewMoreStatus的位置显示div.

I have a plus sign and when the user clicks on plus then it will display the div which displays none on page load. I mean I have to display the div where the class is viewMoreStatus.

我尝试了以下代码，但无法正常工作.

I tried the below code but it's not working.

$('.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>

推荐答案

您的代码中有几个问题.您以所有元素的父元素(.custom_fields)为目标，应该仅以点击元素(.editLeadFileStatus)的父元素为目标.您可以使用:visible选择器检查元素的可见性.

You have several issues in your code. You are targeting the parent (.custom_fields) of all elements, you should target only the parent of clicked element (.editLeadFileStatus). You can check the visibility of the element with :visible selector.

尝试以下方法:

$('.expandExtra').click(function(e) {
  e.preventDefault();
  var $this = $(this);
  //if want it like accordion
  //$('.expandExtra').removeClass('change_sign');
  //else
  $this.removeClass('change_sign');
  if ($this.parent().find('.viewMoreStatus').is(':visible')) {
    $this.removeClass('change_sign');
    $this.parent().find('.viewMoreStatus').slideUp();
  } else {
    $this.addClass('change_sign');
  // slideup all other if want it like accordion
  //$('.viewMoreStatus').not($this.parent().find('.viewMoreStatus')).slideUp();
    $this.parent().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>

这篇关于使用jQuery单击加号时如何扩展最近的div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！