-3

ページがあり、セクションの横に小さな疑問符の画像があり、疑問符の画像をクリックすると、セクションのすぐ下に div が表示され、ページの残りの部分が下にスライドします。基本的には、スライドダウン/スライドアップの JavaScript 関数です。

元：

Section Title (? IMG)
<div id="section">blah blah blah</div>
<br><br>
Section Title 2 (? IMG)
<div id="section2">Blah2 blah2 blah2</div>

上記の例では、最初は div セクションと div セクション 2 内のコンテンツが非表示になっていますが、? そのセクションの IMG をクリックすると、コンテンツが表示され、ページの残りの部分が同時に下にスライドして、div 内のコンテンツ用のスペースが作られます。逆に、コンテンツが表示されているときに疑問符の画像をクリックすると、コンテンツがスライドして非表示になり、下のページがスライドしてギャップを埋めます.

これをどのように書きますか？それに応じてタイトルを付けて個別に展開できる複数のdivを追加できるように、展開可能にする必要があります。

ありがとう

4

2 に答える 2

2

jQuery を使用すると、次のことができます。

HTML:

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />

脚本：

$('#clickme').click(function() {
  $('#book').slideDown('slow', function() {
    // Animation complete.
  });
});

ソース: jQuery ドキュメントhttp://api.jquery.com/slideDown/

HTML ページに jQuery を含めるには、head で次を使用できます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

必要なサーバーに配置して、自分でダウンロードすることもできます。

編集：準備ができたコードを含む完全な回答....

HTML:

<h1 id="id1" class="clickme">click1</h1>
<div id="section1">blah blah blah</div>
<br><br>
<h1 id="id2" class="clickme">click2</h1>
<div id="section2">Blah2 blah2 blah2</div>

脚本

$('.clickme').click(function() {
  $(this).next().slideToggle('slow', function() {
    // Animation complete.
  });   
});
于 2013-03-17T19:18:10.657 に答える
1

たとえば、これを試してください：-

<div class="wrapper">
<div class="btn">section Title (? IMG)</div>
<div class="section">blah blah blah</div>
</div>

    <div class="wrapper">
<div class="btn">section Title (? IMG)</div>
<div class="section">Blah2 blah2 blah2</div>
        </div>

<script>
$(function(){
      $('.btn').click(function(e){
            $(this).parent().toggleClass('slideOut');
        });
});
</script>



.section{
    display:none;
}
.slideOut .section{
display:block;
}
.btn
{
    cursor:pointer;
}
于 2013-03-17T19:27:54.797 に答える