Question

我正在使用它来从上到下滑动触发器但是点击我的按钮没有从顶部移动而内容在按钮之前下降。我想把内容和我的按钮放在一起。

这里有我的代码。

HTML

<section class="drawer">
        <header class="clickme">Click Me</header>
           <div class="drawer-content">

               CONTENT HERE    

           </div>
</section>

CSS

.drawer {
    height: 800px;
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: 5;
}

.drawer > header {
    background: url(../img/UP-Discover.png);
    background-repeat: no-repeat;
    display: block;
    height: 77px;
    margin-left: 30%;
    overflow: hidden;
    width: 100%;
}

.drawer-content {
    background: #fff;
    padding-top: 22px;
    background-repeat: no-repeat;
    border-collapse: collapse;
    height: 742px;
    width: 100%;
    border-bottom: 10px;
    border-color: #000;
}

的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);

Answer 1

您需要放置绝对定位的抽屉。目前，这只是绝对的。它不受元素流的影响，但你需要将它“停靠”到底部，这样它的大小在变化时会自下而上开始。

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

CSS的位置：

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

小提琴：http://jsfiddle.net/eaxkmh73/

已编辑 ：我也忘了提到你需要小心你的高度。除了改变颜色和玩边框:)之外，我采取的CSS自由的一部分是调整抽屉和抽屉内容高度。就像它们一样，有一个绝对定位的抽屉，当它长大时，可点击的标题向上移动超过可见区域的顶部。显然这意味着你无法点击它关闭。因此，请确保适当调整高度以保持项目的正常显示。

此外，将来自己组合其中一个小提琴并提供与您的问题的链接是非常有帮助的。通过这种方式，我们可以准确地看到您正在经历的事情，我们可以解决这个问题，而不是将我们自己的事情放在一起。

更新：在您最新评论之后，我查看了脚本正在做什么，看起来非常简单。用简单的DIY脚本就足够了。我不确定你是否需要一个先进的功能，但如果没有，下面的两个小提琴提供了可选的方法：一个切换类转换CSS;一个用于使用jQuery slideToggle。

CSS转换：http://jsfiddle.net/ceh0t3vv/3/

slideToggle：http://jsfiddle.net/11w2ufdr/2/

如果您希望更灵活地使用内容，我可以选择为标题提供“数据目标”属性。但它们可以进一步简化。

CSS简化：http://jsfiddle.net/ceh0t3vv/4/

slideToggle简化：http://jsfiddle.net/11w2ufdr/3/

显然，CSS也会针对每一个进行调整。

已更新根据最新评论，此处是一个将定位和边距应用于元素的示例：http://jsfiddle.net/ceh0t3vv/5/

你也可以组合一个toggleClass和slideToggle，虽然你需要比我在这个例子中更精细的方法。这更像是一个例子，说明为什么从一开始就对实际抽屉进行定位和z索引可能更好，而不是在打开/关闭时切换。老实说，只需要更少的努力： http://jsfiddle.net/11w2ufdr/4/

从上到下滑动扳机

1 个答案: