0

タイトル バーとその下のパネルを含むコンテナーがあり、タイトル バーがクリックされるまで非表示になっています。その後、パネルをスライドして、タイトル バーを数ピクセル上に上げます。これはうまくいきます。開いた後にできるようにする必要があるのは、タイトル バーをクリックして開始位置に戻すことですが、パネルを閉じて再び非表示にします。開いた後にタイトル バーをクリックすると、パネルが閉じて消えますが、タイトル バーは上げられた位置のままです (下げる必要がないため)。私はいくつかの異なるオプションを試しました。

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

2 に答える 2

1

これは の完璧なケースのようです.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の答えも正しいように見え、その解決策を回避する途中でした。ただし、コードはテストされていません。

于 2013-06-12T18:34:16.853 に答える
1

これではなく：

$spTitle.animate({ top: '8px' });

これを使って：

if (parseInt($spTitle).css('top') > 0 )
    $spTitle.animate({ top: '0px' });
else
     $spTitle.animate({ top: '8px' });
于 2013-06-12T18:26:38.910 に答える