0

我正在尝试从上向下反转 slideToggle。我不想透露元素是什么，而是希望它从顶部滑入。

我不知道如何解释，所以这里是 jsfiddle：http: //jsfiddle.net/h6E7f/。如果单击“标题”，它将显示标题，而不是从上往下滑动。如果单击“页脚”，您可以看到页脚从底部向上滑动。这就是我想要为标题做的，但当然是相反的。有没有人如何使用“slideToggle”来做到这一点，或者我是否坚持使用“动画”

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

});
4

3 回答 3

1

在这里它向下滑动，完成： - 从标题类中删除 display:hidden（仅为方便起见） - 将“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>

于 2013-06-03T07:58:32.873 回答
0

更新小提琴网址：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);
})

});`

于 2013-06-02T21:15:31.770 回答
0

您需要更改标题以向下滑动的 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/

于 2013-06-03T07:03:02.700 回答