Как я могу настроить таргетинг на ребенка с указанным c родительским эффектом, используя jQuery?

Question

Я пытаюсь выяснить, как отредактировать этот код jQuery, чтобы только родитель, чья кнопка нажата, показывал своего потомка. В данный момент все дочерние элементы отображаются при нажатии любой кнопки, а не той, которая вложена в целевого родителя.

Я пробовал использовать

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

, но это не сработало.

Любая помощь приветствуется.

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"); 
    }); 

});

Answer 1

большая ошибка, которую вы допустили, заключалась в том, что вы использовали .child selector при щелчке, при этом будут выбраны все элементы, связанные с этим именем класса. Есть много способов, которыми вы можете достичь этого, вы можете достичь этого с помощью Vanilla Javascript, также нет необходимости в Jquery. Вот мой подход.

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>

Answer 2

Вместо $(this).find(".child") вам нужно использовать $(this).next(".child"), поскольку .child здесь не дочерний элемент .button, а непосредственно следующий брат или сестра .button. Итак, ваш код будет выглядеть так:

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>