6

私のデザイナーは、jquery と css の使い方が 100% わからないデザインを私に渡しました。私は基本的に、ユーザーがフッターを「スライド」してより多くのコンテンツを表示できるようにしようとしています。

私のhtml..

 <div id="footer">
     <div id="expandingFooter"> hidden content</div>
        content that is always visible
 </div>

オンクリックするトグルボタンがあります

$('#expandingFooter').slideToggle();

これにより、エキスパンド フッター コンテンツが下にスライドして開き、上にスライドして閉じます。スライドしてから閉じたいと思います。

ありがとう

4

3 に答える 3

1

次のようなことを試してください：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Untitled</title>
    <script type="text/javascript" src="shared-scripts/jquery-1.2.4b.js"></script>
    <script type="text/javascript">
    <!--
  $(document).ready(function(){
    $("#footer").click(function () {
      if ($("#expandingFooter").is(":hidden")) {
        $("#expandingFooter").show("slow");
      } else {
        $("#expandingFooter").slideUp();
      }
    });
    $("#expandingFooter").hide();
  });
    //--></script>

</head>

<body>
 <div id="footer">
     <div id="expandingFooter"> hidden content</div>
        content that is always visible
 </div>
</body>
</html>
于 2008-12-12T18:45:21.200 に答える
1

私の解決策はちょっとしたトリックです。あなたが望むようにslideUp()関数はJQueryで構築されていません.それを達成する方法はあなたのhtml/cssデザインに依存するからです. 通常の流れは上から下です。

私はこれを提案します：

<a id="toggle">Toggle()</a>

<div id="slide" style="position:relative; height: 100px">

    <div id="slideInner" style="position:absolute; bottom: 0; background: lightblue"">
        <p>Suspendisse potenti. Vivamus libero. Dummy Text</p>
    </div>

</div>


<script type="text/javascript">
    $('.hoverable').hover( function() { $(this).find("div").show(); },
                       function() { $(this).find("div").hide(); } );

    $('#toggle').click(function () {
        $('#slideInner').slideToggle();
    });
</script>

このコードは単なる例です。インライン CSS を外部シートに移動します。JavaScriptの同上。

「slide」div を非表示にする場合は、slideToggle() 関数にコールバックを追加し、「slide」div で hide() を呼び出します。

于 2008-12-12T18:51:53.700 に答える