Estoy tratando de averiguar cómo editar este código jQuery para que solo el padre cuyo botón se haga clic muestre a su hijo. Por el momento, todos los elementos secundarios se muestran cuando se hace clic en cualquier botón, no en el anidado en el elemento primario objetivo.

He intentado usar

$(this).find(".child").toggleClass("open");

Pero esto no funcionó.

Cualquier ayuda muy apreciada.

https://jsfiddle.net/jf1ya0cz/2/

HTML

    <div class="parent">
     <div class="child">
     </div>
    </div>

    <div class="parent">
     <div class="child">
     </div>
    </div>

    <div class="parent">
     <div class="child">
     </div>
    </div>

CSS


    .parent {
      position:relative;
      width:100px;
      height:100px;
      background:red;
      display:inline-block;
      float:left;
      margin-right:6px;
    }

    .child {
      width:inherit;
      height:30px;
      position:absolute;
      bottom:0;
      background-color:blue;
      opacity:0;
      transition:0.5s;
    }

    .child.open {
      opacity:1;
    }

    .button {
      float: left;
      background: yellow;
      width: 40px;
      height: 40px;
      position: absolute;
      top: 0;
      left: 0;
    }

jQuery

jQuery(document).ready(function($) {    

    $( "<span class='button'></span>" ).insertBefore( ".child" );

$(".button").click(function() { 
        $(".child").toggleClass("open"); 
    }); 

});
0
Jack1991 3 may. 2020 a las 17:58

2 respuestas

La mejor respuesta

En lugar de $(this).find(".child") necesita usar $(this).next(".child") porque {{X2} } aquí no es el elemento hijo de .button sino el hermano inmediatamente siguiente de .button. Entonces, su código será como:

jQuery(document).ready(function($) {
  $("<span class='button'></span>").insertBefore(".child");

  $(".button").click(function() {
    $(this).next(".child").toggleClass("open");
  });
});
.parent{position:relative;width:100px;height:100px;background:red;display:inline-block;float:left;margin-right:6px}
.child{width:inherit;height:30px;position:absolute;bottom:0;background-color:#00f;opacity:0;transition:.5s}
.child.open{opacity:1}
.button{float:left;background:#ff0;width:40px;height:40px;position:absolute;top:0;left:0}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <div class="child">
  </div>
</div>

<div class="parent">
  <div class="child">
  </div>
</div>

<div class="parent">
  <div class="child">
  </div>
</div>
1
palaѕн 3 may. 2020 a las 15:02

El gran error que estaba cometiendo fue usar el selector .child al hacer clic en este, seleccionará todos los elementos atribuidos con este nombre de clase. Hay muchas maneras de lograr esto, puede lograr esto usando Vanilla Javascript, no hay necesidad de Jquery también. Aquí está mi enfoque.

jQuery(document).ready(function($) {	

	
$(".parent").click(function(e) { 
			e.target.firstElementChild.classList.toggle("open")
	}); 
	
});
.parent {
  position:relative;
  width:100px;
  height:100px;
  background:red;
  display:inline-block;
  float:left;
  margin-right:6px;
}

.child {
  width:inherit;
  height:30px;
  position:absolute;
  bottom:0;
  background-color:blue;
  opacity:0;
  transition:0.5s;
}

.child.open {
  opacity:1;
}

.button {
	float: left;
	background: yellow;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0;
	left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
 	 <div class="child">
 	 </div>
	</div>

	<div class="parent">
 	 <div class="child">
 	 </div>
	</div>

	<div class="parent">
 	 <div class="child">
 	 </div>
	</div>
1
MD M Nauman 3 may. 2020 a las 15:12