I have a piece of HTML that I want to when clicked animate the div and close when clicked again. HTML:
<a href="#" class="menu_greyed performance_menu_trigger">My Details <span class="push_right">▼</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');
});
});
It opens as it should when you click it for the first time, but not when it's open. It doesn't close the div.
$(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">▼</span></a> <div class="performance_menu_holder"> <a href="details" class="push_right performance_menu_item">Details</a> </div>
You can using slideToggle instead of animation.
$(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');
});
});
I have achived it with:
$(document).ready(function(){
$('.performance_menu_holder').hide()
$('.performance_menu_trigger').click(function(){
$('.performance_menu_holder').slideToggle("fast");
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.