1

ここで多くの質問がありますので、jquery/javascript の初心者である私に辛抱強くお待ちください。

ここに私の現在のページがありますhttp://integratedcx.com/index.php/experience

基本的に、各プロジェクトとプロジェクト カテゴリには、現在のように表示されるだけでなく、引き出しのような非表示の div、スライドダウンが必要です。

私はjqueryでこれを達成しようとしましたが、あまり成功しませんでした.ここに私の作業があります http://integratedcx.com/temp/slide.html

  1. ジャンプする代わりに「緩和」するために、1つの開口部の下のdivを取得するにはどうすればよいですか
  2. 最近のプロジェクトでクローズ機能 (オレンジ色のボックス) を正しく動作させるにはどうすればよいですか?
  3. 画像の右側にあるプロジェクト リストを (現在のページのように) 非表示にし、引き出しを開く効果を持たせるにはどうすればよいですか。
  4. jqueryを使用してこれを複数のdivに割り当てる簡単な方法はありますか?

あらゆる/すべての助けに感謝します。

4

3 に答える 3

1

質問 4 については、次のスクリプト (上記の ComputerArts の回答に基づく) を使用すると、多数の div にスライド効果を簡単に追加できます。

$(document).ready(function () {
    $(".toggle-to-show").click(function (evt) {

      var targetdiv = $(evt.currentTarget).attr("data-drawer");

      $(targetdiv).slideToggle(1000, function() {
            if ($(this).is(':visible')) {
                $('.bracket', evt.currentTarget).html('less');
                $('.project', evt.currentTarget).hide();
                $('.closebox', this).bind('click', function(e) {$(evt.currentTarget).triggerHandler('click');});
            }
            else {
                 $('.bracket', evt.currentTarget).html('more');
                 $('.project', evt.currentTarget).show();
                 $('.closebox', this).unbind('click');
            }
      });
   })

})

次に、トグル ボタンとスライダーを次のようにマークアップします。

<div class="toggle-to-show" data-drawer="#firstsection">
     <div class="project">Project One Heading</div>
     <div class="bracket">more</div>
</div>

<div id="firstsection">
     <h3>Project One Heading</h3>
     stuff
     <img class="closebox" src="close.jpg">
</div>

<div class="toggle-to-show" data-drawer="#secondsection">
     <div class="project">Project Two Heading</div>
     <div class="bracket">more</div>
</div>

<div id="secondsection">
     <h3>Project Two Heading</h3>
     stuff
     <img class="closebox" src="close.jpg">
</div>


<div class="toggle-to-show" data-drawer="#thirdsection">
     <div class="project">Project Third Heading</div>
     <div class="bracket">more</div>
</div>

<div id="thirdsection">
     <h3>Project Three Heading</h3>
     stuff
     <img class="closebox" src="close.jpg">
</div>
于 2012-10-18T03:14:07.530 に答える
0

ポイント＃1と＃2については、このフィドル を試してください。最初のスクリプトタグを次のように変更しただけです。

<script type='text/javascript'>

$(document).ready(function () {
    $(".projectx-show").click(function () {
        $("#projectx").slideToggle(1000, function() {
            if ($(this).is(':visible')) {
              $('#projectx-bracket').html('less');
            }
            else {
              $('#projectx-bracket').html('more');
            }
        });
    })

})

</script>

参考までに、使用する必要はありません$(window).load... $(document).ready1つで十分です

＃3に関しては、あなたが何を言おうとしているのかわかりません。

＃4、はい、クラスを使用し、ページ内のすべてのブロックで構造を同じに保つ方法があります。

于 2012-10-18T01:35:02.040 に答える
0

  1. http://api.jquery.com/slideDown/

    $("#link_id").click(function(){
  $("#div_to_show").slideDown();
});

  2. http://api.jquery.com/slideUp/

    $('#div_to_close').slideUp();

  3. 1と2の両方の方法を使用する

  4. セレクターにIDの代わりにクラス名を使用する。例えば：

    $(".link_class").click(function(){
  $(this).parentsUntil('.ex-wrapper').find('.div_to_show').slideDown();
});
于 2012-10-18T01:29:32.507 に答える