点击动画标题栏，滑动面板打开，如何再次单击以在向下凸起的栏和关闭面板上动画？ [英] click animates title bar up, slidesdown a panel open, how do I click again to animate down raised bar and close panel?

问题描述

我有一个带有标题栏和下面的面板的容器，它隐藏起来直到标题栏被点击，然后滑动面板并将标题栏抬高几个像素。这工作正常。在开放后我需要做的是点击标题栏，并将其放回原始位置，同时仍然关闭面板并再次隐藏。当我打开后点击标题栏时，面板关闭并消失，但标题栏保持在抬起位置（因为我没有任何东西可以将它降低）。我已经尝试了一些不同的选项。

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 。

您可以查看文档

 < 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> 
  

我还包括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

<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 href=""><img src="~/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>

jquery

     <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>

解决方案

This seems like the perfect case for .slideToggle.

You can see the documentation here.

<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>

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.

这篇关于点击动画标题栏，滑动面板打开，如何再次单击以在向下凸起的栏和关闭面板上动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！