jQuery，函数内的函数目标错误的div

Question

我有一组隐藏的对象 div在 wrapper 里面，它也有一个 child <a>在隐藏对象上切换 slideDown 效果的按钮。但是，当单击它时，它只会打开最后一个对象中隐藏的 div，而不是仅在其子对象中打开

简化的 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

您的代码太复杂了。

这是一个更简单的:

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