JQuery animieren und öffnen div beim Klicken auf Trigger und schließen auf die gleiche Schaltfläche

Question

Ich habe ein Stück HTML, die ich möchte, wenn Sie das div klicken und schließen, wenn erneut geklickt wird. 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'); 
     }); 
    }); 

Es öffnet sich, wie es sollte, wenn man es zum ersten Mal klicken, aber nicht, wenn es geöffnet ist. Es schließt das Div nicht.

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>

Sie können statt Animation slideToggle verwenden.

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

ich achived habe es mit:

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