Question

我正试图从上到下反转slideToggle。我想让它从顶部滑入，而不是透露元素是什么。

我不知道如何解释所以这里是jsfiddle：http://jsfiddle.net/h6E7f/。如果您点击“标题”，它将显示标题，而不是滑动从顶部开始。如果单击“页脚”，则可以看到页脚从底部向上滑动。而这正是我想要的标题，但当然是逆转。有没有人怎么用“slideToggle”做这个或者我坚持使用“animate”

HTML

<a href="#" class="header">header</a>
<a href="#" class="footer">footer</a>
<header>
    <h1>header</h1>
</header>


<footer>
    <h1>footer</h1>
</footer>

JQuery的

jQuery(function ($) {
    $('.header').on('click', function(){
        $('header').slideToggle(200);
    });

    $('.footer').on('click', function(){
        $('footer').slideToggle(200);
    });

});

Answer 1

这里向下滑动，完成： - 删除显示：隐藏在标题类中（仅为方便起见） - 动画“margin-top”从-100px到0px - 使用手写切换功能

你使用绝对定位我离开它是怎么回事。如果你想在链接下滑动标题，请使用一些包含overflow-y：hidden等的包装div。

jQuery(function ($) {
    var a = true;
	$('.header').on('click', function(){
        if(a){
            $('header').animate({"margin-top":"0px"});
        }else{
            $('header').animate({"margin-top":"-100px"});
        }
        a=!a;
	});

	$('.footer').on('click', function(){
		$('footer').slideToggle(200);
	});
    
});

header{
    position: absolute;
    height: 50px;
    width: 100%;
    background: red;
}

footer{
    display: none;
    position: absolute;
    bottom: 0;
    height: 50px;
    width: 100%;
    background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="header">header</a>
<a href="#" class="footer">footer</a>
<header style="margin-top:-100px">
    <h1>header</h1>
</header>


<footer>
    <h1>footer</h1>
</footer>

Answer 2

在小提琴网址上更新：http://jsfiddle.net/6Zt9A/

<h1 style="display: none" id="header_wrapper">header</h1>
<a href="#" class="header">header</a>
<a href="#" class="footer">footer</a>
<h1 style="display: none" id="footer_wrapper">footer</h1>

jQuery(function ($) {
$('.header').on('click', function() {
    $('#header_wrapper').slideToggle(200);
})
$('.footer').on('click', function() {
    $('#footer_wrapper').slideToggle(200);
})

}）;`

Answer 3

您需要更改标题的css和效果以向下滑动。

<强>的Javascript

jQuery(function ($) {
    var posy;
    $('.header').on('click', function(){
        posy = (posy==50?-50:50);
        $('header').animate(
        {
            top:posy
        }, 300);
        //$('header').slideToggle(200);
    });

    $('.footer').on('click', function(){
        $('footer').slideToggle(200);
    });
});

<强> CSS

header {
    position: absolute;
    top:-50px;
    height: 50px;
    width: 100%;
    background: red;
}

footer {
    display: none;
    position: absolute;
    bottom: 0;
    height: 50px;
    width: 100%;
    background: red;
}

参见演示http://jsfiddle.net/h6E7f/4/

反向slideToggle

3 个答案: