单击触发器并在同一按钮上关闭时，JQuery 动画并打开 div答案

【问题标题】：JQuery animate and open div when clicking on trigger and close on same button单击触发器并在同一按钮上关闭时，JQuery 动画并打开 div
【发布时间】：2017-10-28 18:57:40
【问题描述】：

我有一段 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。

【问题讨论】：

为什么不点击<>并创建一个minimal reproducible example？

标签： jquery html css jquery-animate

【解决方案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');
    });
});

【讨论】：

【解决方案2】：

我已经做到了：

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

【讨论】：