Javascript 从上到下滑动触发器

我用它从上到下滑动触发器，但点击我的按钮时，按钮不会从顶部移动，内容会落在按钮之前。我想把内容和我的按钮放在一起

(function(e) {
    var t = {
        init: function(n, r) {
            if (n.showDrawer == true && n.slideTimeout == true) {
                setTimeout(function() {
                    t.slide(r, n.drawerHiddenHeight, n.slideSpeed)
                }, n.slideTimeoutCount)
            } else if (n.showDrawer == "slide") {
                t.slide(r, n.drawerHiddenHeight, n.slideSpeed)
            } else if (n.showDrawer == false) {
                t.hide(n, r)
            }
            e(".clickme").on("click", function() {
                t.toggle(n, r)
            })
        },
        toggle: function(n, r) {
            e(r).height() + n.borderHeight === n.drawerHeight ? t.slide(r, n.drawerHiddenHeight, n.slideSpeed) : t.slide(r, n.drawerHeight - n.borderHeight, n.slideSpeed)
        },
        slide: function(t, n, r) {
            e(t).animate({
                height: n
            }, r)
        },
        hide: function(t, n) {
            e(n).css("height", t.drawerHiddenHeight)
        }
    };
    e.fn.slideDrawer = function(n) {
        var r = this.children(".drawer-content"),
            i = parseInt(r.css("border-top-width"));
        drawerHeight = this.height() + i;
        drawerContentHeight = r.height() - i;
        drawerHiddenHeight = drawerHeight - drawerContentHeight;
        var s = {
            showDrawer: "slide",
            slideSpeed: 100,
            slideTimeout: true,
            slideTimeoutCount: 5e3,
            drawerContentHeight: drawerContentHeight,
            drawerHeight: drawerHeight,
            drawerHiddenHeight: drawerHiddenHeight,
            borderHeight: i
        };
        var n = e.extend(s, n);
        return this.each(function() {
            t.init(n, this)
        })
    }
})(jQuery);

这是我的密码

HTML

jQuery

$(function() {
    $('.drawer').slideDrawer({
        showDrawer: false,
        // slideTimeout: true,
        slideSpeed: 500,
        slideTimeoutCount: 3000,
    });
});

编辑：这是我正在使用的插件。它是基于底部的。若我把它放在底部，它会一起滑动

(function(e) {
    var t = {
        init: function(n, r) {
            if (n.showDrawer == true && n.slideTimeout == true) {
                setTimeout(function() {
                    t.slide(r, n.drawerHiddenHeight, n.slideSpeed)
                }, n.slideTimeoutCount)
            } else if (n.showDrawer == "slide") {
                t.slide(r, n.drawerHiddenHeight, n.slideSpeed)
            } else if (n.showDrawer == false) {
                t.hide(n, r)
            }
            e(".clickme").on("click", function() {
                t.toggle(n, r)
            })
        },
        toggle: function(n, r) {
            e(r).height() + n.borderHeight === n.drawerHeight ? t.slide(r, n.drawerHiddenHeight, n.slideSpeed) : t.slide(r, n.drawerHeight - n.borderHeight, n.slideSpeed)
        },
        slide: function(t, n, r) {
            e(t).animate({
                height: n
            }, r)
        },
        hide: function(t, n) {
            e(n).css("height", t.drawerHiddenHeight)
        }
    };
    e.fn.slideDrawer = function(n) {
        var r = this.children(".drawer-content"),
            i = parseInt(r.css("border-top-width"));
        drawerHeight = this.height() + i;
        drawerContentHeight = r.height() - i;
        drawerHiddenHeight = drawerHeight - drawerContentHeight;
        var s = {
            showDrawer: "slide",
            slideSpeed: 100,
            slideTimeout: true,
            slideTimeoutCount: 5e3,
            drawerContentHeight: drawerContentHeight,
            drawerHeight: drawerHeight,
            drawerHiddenHeight: drawerHiddenHeight,
            borderHeight: i
        };
        var n = e.extend(s, n);
        return this.each(function() {
            t.init(n, this)
        })
    }
})(jQuery);

---

你需要定位你的绝对定位抽屉。目前，这只是绝对的。它脱离了元素流，但您需要将其“停靠”到底部，以便它的大小在发生变化时从下至上开始

我把你的代码和我自己的一些CSS自由组合在一起。我还更新了你的标题，让它有东西可以点击。@NewToJS指出的是，你有一个标题，但没有点击它

职位的CSS：

.drawer {
    bottom: 0;
    max-height: 700px;
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: 5;
}

为你拉小提琴：

编辑：我还忘了提到你需要注意你的身高。除了改变颜色和玩边框之外，我的CSS自由的一部分是调整抽屉和抽屉内容的高度。就像他们一样，有一个绝对定位的抽屉，当它增长时，可点击的标题会向上移动超过可见区域的顶部。显然这意味着你不能点击它关闭。因此，请确保适当调整高度以保持物品在视野中

此外，在将来，将这些小提琴中的一个放在一起并提供与您的问题的链接是非常有帮助的。这样，我们就可以准确地看到你正在经历什么，我们可以解决这个问题，而不是把我们自己的问题放在一起

更新：在您发表最新评论之后，我查看了脚本正在执行的操作，它看起来相当直接。只需一个简单的DIY脚本就足够了。我不确定是否有您需要的高级功能，但如果没有，下面的两个小提琴提供了可选的方法：一个是切换CSS转换的类；一个用于使用jqueryslidetoggle

CSS转换：

滑动切换：

如果您希望在内容中使用更灵活的内容，我保留了向标题提供“数据目标”属性的选项。但它们可以进一步简化

CSS简化：

滑动切换简化：

显然，CSS也针对每一种情况进行了调整

更新了根据最新评论，下面是一个将定位和边距应用于元素的示例：

您还可以将toggleClass和slideToggle组合在一起，尽管您需要比我在本例中介绍的更精细的技巧。这更像是一个例子，说明了为什么从一开始就对实际抽屉进行定位和z索引可能比打开/关闭更好。老实说，只要少费点力气：

---

您没有

按钮

。我可以看到您有一个带有click me的

标题

标记，但jQuery中也没有

。click（）

事件。将页面视为一个虚拟页面，它将按照您的要求使用正确的指令执行操作，如果没有指令，它将不会执行任何操作，因为它不知道任何内容，因此无法进行编程。请查看我的编辑我需要的是从上而不是从下执行相同的操作。关闭时是否有机会更改z索引？因为这个方法是构建的，即使在应该打开的区域被关闭，我也不能点击或制作任何东西。我试着使用这个，但要从一开始就改变z索引，我的幻灯片将在我的元素后面打开$（this）.parent（）.children（'.drawer content'）.css（“z-index”，-1）；在我给出的例子中，我没有解释其他任何东西。但是，您可以轻松地在其上设置z索引或定位。这完全取决于你如何使用它。如果它一直处于顶端，position:absolute会处理它。例如，您只需要为它下面的第一个元素设置上边距。

.drawer {
    bottom: 0;
    max-height: 700px;
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: 5;
}