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

Question

我有一组对象，我将 div 隐藏在包装器中，它还有一个子 <a> 按钮，可以切换隐藏对象的 slideDown 效果。但是，当单击它时，它只打开最后一个对象中隐藏的 div，而不是仅在 ITS 子对象中打开

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

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>

Answer 2

您的代码太复杂了。

这里有一个更简单的：

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

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

jQuery, function within function targets wrong div

html

css

arrays

jquery

toggle