Jak slideToggle na kliknięcia tylko dzieci z klikniętego elementu

Question

Mam 2 div z 2 div wewnątrz to tak

<div id="div1" class="div"> 
    <div class="flip">Click to slide down panel</div> 
    <div class="panel">Hello world!</div> 
</div> 

<div id="div2" class="div"> 
    <div class="flip">Click to slide down panel</div> 
    <div class="panel">Hello world!</div> 
</div> 

A moja JavaScript jest

$(document).ready(function(){ 
    $(".flip").click(function(){ 
     $(".panel").children(".panel").slideToggle("slow"); 
    }); 
}); 

Przykładem jest https://jsfiddle.net/msjaasfk/2/

Chcę, aby kliknięcie .flip wyświetliło tylko .panel w tym samym dziale div, nie wszystkie divy z klasą .panel.

Answer 1

Wybieramy i przełączamy wszystkie elementów .panel. Zmodyfikować kod tak, że element .panel odpowiadający klikniętego elementu jest włączany tylko:

Updated Example

$(".flip").click(function() { 
    $(this).next().slideToggle("slow"); 
}); 

• this jest nawiązaniem do klikniętego .flip elementu
• .next() method wybierze następnego rodzeństwo element (w tym przypadku .panel).

Na marginesie, można również zmodyfikować kod tak, że tylko jeden panel jest otwarty na raz:

Updated Example

$(".flip").click(function() { 
 
    $('.panel').not($(this).next()).slideUp(); 
 
    $(this).next().slideToggle("slow"); 
 
});

.panel, 
 
.flip { 
 
    padding: 5px; 
 
    text-align: center; 
 
    background-color: #e5eecc; 
 
    border: solid 1px #c3c3c3; 
 
} 
 
.panel { 
 
    padding: 50px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div1" class="div"> 
 
    <div class="flip">Click to slide down panel</div> 
 
    <div class="panel">Hello world!</div> 
 
</div> 
 

 
<div id="div2" class="div"> 
 
    <div class="flip">Click to slide down panel</div> 
 
    <div class="panel">Hello world!</div> 
 
</div>

Answer 2

W context , .panel wybiera wszystkie elementy z klasą panel. W przypadku kliknięcia na elemencie .flip, można użyć jQuery .next() wybrać tylko kolejny .panel Możesz określić selektor .panel, w przypadku, gdy struktura HTML wewnątrz div zmienia

$(this).next(".panel").slideToggle("slow"); 

Oto pełna przykład

$(document).ready(function() { 
 
    $(".flip").click(function() { 
 
    $(this).next(".panel").slideToggle("slow"); 
 
    }); 
 
});

.panel, 
 
.flip { 
 
    padding: 5px; 
 
    text-align: center; 
 
    background-color: #e5eecc; 
 
    border: solid 1px #c3c3c3; 
 
} 
 
.panel { 
 
    padding: 50px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div1" class="div"> 
 
    <div class="flip">Click to slide down panel</div> 
 
    <div class="panel">Hello world!</div> 
 
</div> 
 

 
<div id="div2" class="div"> 
 
    <div class="flip">Click to slide down panel</div> 
 
    <div class="panel">Hello world!</div> 
 
</div>