JQuery动画和打开div当点击触发器并关闭相同的按钮

Question

我有一块HTML，我想单击动画div时关闭，再次单击时关闭。 HTML：

<a href="#" class="menu_greyed performance_menu_trigger">My Details <span class="push_right">&#x25BC;</span></a> 
<div class="performance_menu_holder"> 
<a href="details" class="push_right performance_menu_item">Details</a> 
</div> 

JQuery的：

$(document).ready(function(){ 
     $('.performance_menu_holder').hide() 
     $('.performance_menu_trigger').click(function(){ 
      $('.performance_menu_holder').animate({ "opacity" : "show", bottom: "100" }, 500); 
      $('.performance_menu_trigger').addClass('performance_menu_trigger_close'); 
     }); 
     $('.performance_menu_trigger_close').click(function(){ 
      $('.performance_menu_holder').animate({ "opacity" : "show", top: "100" }, 500); 
      $('.performance_menu_trigger').removeClass('performance_menu_trigger_close'); 
     }); 
    }); 

它打开，因为它应该当你点击它的第一次，但是当它不是开放的。它不关闭div。

Answer 1

$(document).ready(function(){ 
 
     $('.performance_menu_holder').hide() 
 
     $('.performance_menu_trigger').click(function(){ 
 
      $('.performance_menu_holder').slideToggle({ "opacity" : "show", bottom: "100" }, 500); 
 
      $('.performance_menu_trigger').addClass('performance_menu_trigger_close'); 
 
     }); 
 
     $('.performance_menu_trigger_close').click(function(){ 
 
      $('.performance_menu_holder').slideToggle({ "opacity" : "show", top: "100" }, 500); 
 
      $('.performance_menu_trigger').removeClass('performance_menu_trigger_close'); 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<a href="#" class="menu_greyed performance_menu_trigger">My Details <span class="push_right">&#x25BC;</span></a> 
 
<div class="performance_menu_holder"> 
 
<a href="details" class="push_right performance_menu_item">Details</a> 
 
</div>

可以使用，而不是动画的slideToggle。

$(document).ready(function(){ 
    $('.performance_menu_holder').hide() 
    $('.performance_menu_trigger').click(function(){ 
     $('.performance_menu_holder').slideToggle({ "opacity" : "show", 
bottom: "100" }, 500); 

$('.performance_menu_trigger').addClass('performance_menu_trigger_close'); 
    }); 
    $('.performance_menu_trigger_close').click(function(){ 
     $('.performance_menu_holder').slideToggle({ "opacity" : "show", top: "100" }, 500); 
     $('.performance_menu_trigger').removeClass('performance_menu_trigger_close'); 
    }); 
}); 

Answer 2

我与achived它：

$(document).ready(function(){ 
     $('.performance_menu_holder').hide() 
     $('.performance_menu_trigger').click(function(){ 
      $('.performance_menu_holder').slideToggle("fast"); 
     }); 
    });