jQuery, Funktion innerhalb Funktion Ziele falsch div

Question

Ich habe eine Reihe von Objekten, wo ich div im Wrapper versteckt, die alos hat eine <a> Schaltfläche, die einen SlideDown-Effekt auf das versteckte Objekt schaltet. Doch angeklickt, wenn es öffnet sich nur die versteckte div in dem letzten Objekt, statt nur in ITS Kind

Vereinfachtes HTML:

<div class="panel-compressed"> 
    <div class="panel-header"> 
    <div class="toggle-panel"> 
     <a href="#" class="toggle-panel-btn">Open content</a> 
    </div> 
    </div> 
    <div class="panel-body"> 
     <p>Content goes here</p> 
    </div> 
</div> 

<div class="panel-compressed"> 
    <div class="panel-header"> 
    <div class="toggle-panel"> 
     <a href="#" class="toggle-panel-btn">Open content</a> 
    </div> 
    </div> 
    <div class="panel-body"> 
     <p>Content goes here</p> 
    </div> 
</div> 

<div class="panel-compressed"> 
    <div class="panel-header"> 
    <div class="toggle-panel"> 
     <a href="#" class="toggle-panel-btn">Open content</a> 
    </div> 
    </div> 
    <div class="panel-body"> <!-- THIS OPENS WHEN CLICKING ANY .toggle-panel-btn --> 
     <p>Content goes here</p> 
    </div> 
</div> 

JS:

var $panelToggle = $('.toggle-panel-btn'); //Toggle button 
var $panelBody = $('.panel-body'); //Hidden content 
var $panelCompressed = $('.panel-compressed') //Wrapper 

function togglePanel(){ 
     $this = $(this); 
     $this.find($panelBody).hide(); 
     //Open .panel-body 
     function showPB() { 
      $this.find($panelBody).slideDown(); 
      $this.find($panelToggle).one("click", hidePB); 
      $this.addClass('dropdown-open'); 
     } 

     //close .panel-body 
     function hidePB() { 
      $this.find($panelBody).slideUp(); 
      $this.find($panelToggle).one("click", showPB); 
      $this.removeClass('dropdown-open'); 
     } 
     $this.find($panelToggle).click("click", showPB); 
    } 

    $panelCompressed.each(togglePanel); 

Answer 1

Ihr Code ist viel zu komplex.

Hier ist eine einfachere:

$(function() { 
 
    $('.panel-compressed .toggle-panel-btn').on("click",function(e) { 
 
    e.preventDefault(); // cancel link click 
 
    $(this).closest(".panel-compressed") 
 
     .toggleClass("dropdown-open") 
 
     .find('.panel-body').slideToggle(); 
 
    }); 
 
});

.panel-body { display:none } 
 
.dropdown-open { background-color:pink }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="panel-compressed"> 
 
    <div class="panel-header"> 
 
    <div class="toggle-panel"> 
 
     <a href="#" class="toggle-panel-btn">Open content</a> 
 
    </div> 
 
    </div> 
 
    <div class="panel-body"> 
 
     <p>Content goes here</p> 
 
    </div> 
 
</div> 
 

 
<div class="panel-compressed"> 
 
    <div class="panel-header"> 
 
    <div class="toggle-panel"> 
 
     <a href="#" class="toggle-panel-btn">Open content</a> 
 
    </div> 
 
    </div> 
 
    <div class="panel-body"> 
 
     <p>Content goes here</p> 
 
    </div> 
 
</div> 
 

 
<div class="panel-compressed"> 
 
    <div class="panel-header"> 
 
    <div class="toggle-panel"> 
 
     <a href="#" class="toggle-panel-btn">Open content</a> 
 
    </div> 
 
    </div> 
 
    <div class="panel-body"> <!-- THIS OPENS WHEN CLICKING ANY .toggle-panel-btn --> 
 
     <p>Content goes here</p> 
 
    </div> 
 
</div>

Answer 2

var $panelCompressed = $('.panel-compressed') //Wrapper 
 

 
function togglePanel(){ 
 
    var $this = $(this); 
 
    var $panelBody = $this.find('.panel-body').hide(); 
 
    var $panelToggle = $this.find('.toggle-panel-btn'); 
 
    
 
    //Toggle .panel-body 
 
    function togglePB() { 
 
     $panelBody.slideToggle(); 
 
     $this.toggleClass('dropdown-open'); 
 
    } 
 

 
    $panelToggle.click(togglePB); 
 
} 
 

 
$panelCompressed.each(togglePanel);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="panel-compressed"> 
 
    <div class="panel-header"> 
 
    <div class="toggle-panel"> 
 
     <a href="#" class="toggle-panel-btn">Open content</a> 
 
    </div> 
 
    </div> 
 
    <div class="panel-body"> 
 
     <p>Content goes here</p> 
 
    </div> 
 
</div> 
 

 
<div class="panel-compressed"> 
 
    <div class="panel-header"> 
 
    <div class="toggle-panel"> 
 
     <a href="#" class="toggle-panel-btn">Open content</a> 
 
    </div> 
 
    </div> 
 
    <div class="panel-body"> 
 
     <p>Content goes here</p> 
 
    </div> 
 
</div> 
 

 
<div class="panel-compressed"> 
 
    <div class="panel-header"> 
 
    <div class="toggle-panel"> 
 
     <a href="#" class="toggle-panel-btn">Open content</a> 
 
    </div> 
 
    </div> 
 
    <div class="panel-body"> <!-- THIS OPENS WHEN CLICKING ANY .toggle-panel-btn --> 
 
     <p>Content goes here</p> 
 
    </div> 
 
</div>