问题描述
我有一个带有标题栏和下面的面板的容器，它隐藏起来直到标题栏被点击，然后滑动面板并将标题栏抬高几个像素。这工作正常。在开放后我需要做的是点击标题栏，并将其放回原始位置，同时仍然关闭面板并再次隐藏。当我打开后点击标题栏时，面板关闭并消失，但标题栏保持在抬起位置（因为我没有任何东西可以将它降低）。我已经尝试了一些不同的选项。
html
< div id =specialsEventsContainerstyle =float：left>
< div id =specialsEventsTitlestyle =top：90px>
< p>特惠&活动和LT; / P>< / DIV>
< div class =promobox>
< div id =revealDownstyle =height：0; display：block;>
< div id =specialscalendarPortals>
< div class =halfsizeBoxesstyle =float：left>
< a href =>< p>文字文字文字< / p>< / a>
< / div>
< div class =halfsizeBoxes>
< a href =>< p> Tulalip Resort-Casino日历门户< / p>< / a>
< / div>
< / div>
< div class =fullsizeBoxes>
< a href =>< img src =〜/ Content / Images / promoimage.jpg/>< / a>
< / div>
< div class =fullsizeBoxes>
< a href =>< img src =〜/ Content / Images / promoimage.jpg/>< / a>
< / div>
< div class =fullsizeBoxesstyle =margin-bottom：5px;>
< a href =>< img src =〜/ Content / Images / promoimage.jpg/>< / a>
< / div>
< / div>
< / div>
jquery
< script type =text / javascript>
$（document）.ready（function（）{
var $ spTitle = $（'＃specialsEventsTitle'）;
var $ promobox = $（'＃revealDown'） ;
$ b $（$ spTitle）.click（function（）{
$ spTitle.animate（{top：'8px'}）;
if（$ promobox.height（）> 0）{
$ promobox.animate（{height：0}）;
} else {
$ promobox.animate（'slow'）。animate（{身高：'100％'}）;
}
}）;
}）;
< / script>
这看起来就像 .slideToggle 。
您可以查看文档 我还包括Rob R的答案，因为它看起来是正确的，我正处在解决方案的中间以及。代码虽然未经测试。 I have a container with a title bar and a panel below it that is hidden until the title bar is clicked, which then slidesDown the panel and raises the title bar up several pixels. This works fine. What I need to be able to do after it is open, is to click the title bar and have it drop back down to its starting position, while still closing the panel and hiding again. When I click the title bar after open, the panel closes and disappears, but the title bar remains in the raised position (because I have nothing to lower it back down). I've tried a few different options. html jquery This seems like the perfect case for You can see the documentation here. I also included Rob R's answer as it looks correct and I was in the middle of working around that solution aswell. Code is untested though. 这篇关于点击动画标题栏，滑动面板打开，如何再次单击以在向下凸起的栏和关闭面板上动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
< script type =text / javascript>
$（document）.ready（function（）{
var $ spTitle = $（'＃specialsEventsTitle'）;
var $ promobox = $（'＃revealDown'） ;
$（$ spTitle）.click（function（）{
$ promobox.slideToggle（'slow'，function（）{
if（parseInt（$ spTitle））。 css（'top'）> 0）
$ spTitle.animate（{top：'0px'}）;
else
$ spTitle.animate（{top：'8px'}） ;
}）;
}）;
}）;
< / script>
<div id="specialsEventsContainer" style="float:left">
<div id="specialsEventsTitle" style="top: 90px">
<p>Specials & Events</p></div>
<div class="promobox">
<div id="revealDown" style="height: 0; display:block;">
<div id="specialscalendarPortals">
<div class="halfsizeBoxes" style="float:left">
<a href=""><p>text text text</p></a>
</div>
<div class="halfsizeBoxes">
<a href=""><p>Tulalip Resort-Casino Calendar Portal</p></a>
</div>
</div>
<div class="fullsizeBoxes">
<a target="_blank" lml-data-x="https://www.lmlphp.com/r?x=CtQ9yf-VsMkOCHw1yLKryAY6PMbdsiImCEQrKebA4MnrsinupFY"~/Content/Images/promoimage.jpg" /></a>
</div>
<div class="fullsizeBoxes">
<a href=""><img src="~/Content/Images/promoimage.jpg" /></a>
</div>
<div class="fullsizeBoxes" style="margin-bottom:5px;">
<a href=""><img src="~/Content/Images/promoimage.jpg" /></a>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
var $spTitle = $('#specialsEventsTitle');
var $promobox = $('#revealDown');
$($spTitle).click(function () {
$spTitle.animate({ top: '8px' });
if ($promobox.height() > 0) {
$promobox.animate({ height: 0 });
} else {
$promobox.animate('slow').animate({ height: '100%' });
}
});
});
</script>
.slideToggle.<script type="text/javascript">
$(document).ready(function () {
var $spTitle = $('#specialsEventsTitle');
var $promobox = $('#revealDown');
$($spTitle).click(function () {
$promobox.slideToggle('slow', function() {
if (parseInt($spTitle).css('top') > 0 )
$spTitle.animate({ top: '0px' });
else
$spTitle.animate({ top: '8px' });
});
});
});
</script>