Question

我有一个页面，并且我的部分旁边有一些小问号图像，如果单击问号图像，则该部分下方的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，可以相应地标题并单独扩展。

由于

Answer 1

使用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 docs http://api.jquery.com/slideDown/

要在HTML页面上包含jQuery，您可以在头部使用以下内容：

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

SCRIPT

$('.clickme').click(function() {
  $(this).next().slideToggle('slow', function() {
    // Animation complete.
  });   
});

Answer 2

试试这个例子： -

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

使用div向下滑动的javascript代码（显示/隐藏）

2 个答案: