为什么动画会在slideToggle（）上重置？ （jQuery的）

Question

我在视口底部放置了一个div（固定）作为联系人选项卡，当单击选项卡时它触发一个面板滑出，这是正常的。

我还试图让标签在单击时滑出，然后在面板上单击关闭按钮时向后滑动。

标签的ID为#menufixed

面板关闭按钮具有班级.nest-custom-button-wrapper

这是我正在使用的JS，每次触发slideToggle时都会导致奇怪的动画重置：

<script> 
jQuery(document).ready(function(){
    jQuery("#menufixed").click(function(){
        jQuery("#menufixed").slideToggle();
    });
});
</script>

查看问题：

https://content.screencast.com/users/Vanstone/folders/Default/media/aa25e806-e0c0-4f8c-b112-e1162ede41da/11new.mp4

如何让标签保持隐藏状态，只在单击.nest-custom-button-wrapper时触发向上滑动？

修改

CSS：

#menufixed {
    z-index: 99999999!important;
    display: block!important;
    position: fixed!important;
    margin: 0 auto!important;
    bottom: 0;
    left: 45%;
    width: 10%;
    height: 40px;
    box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.3);
}

Answer 1

这是因为你在#menufix

的CSS中有这个

display: block!important

jQuery试图隐藏元素，但这种风格正在覆盖它。如果只删除该样式的!important部分，它应该可以正常工作。

更新了CSS

#menufixed {
    z-index: 99999999!important;
    display: block; /* removed the !important style */
    position: fixed!important;
    margin: 0 auto!important;
    bottom: 0;
    left: 45%;
    width: 10%;
    height: 40px;
    box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.3);
}

为了让按钮标签从.nest-custom-button-wrapper向上滑动，您只需添加另一个点击事件即可滑动切换#menufixed

JS代码

jQuery(document).ready(function(){
    jQuery("#menufixed").click(function(){
        jQuery("#menufixed").slideToggle();
    });
    jQuery('.nest-custom-button-wrapper').click(function(e) {
        e.preventDefault(); // not sure if this is an 'a' tag or not

        jQuery("#menufixed").slideToggle();
    });
});