-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 section 和 div section2 里面的内容一开始是隐藏的，但是当 ? 单击该部分的 IMG，内容将自行显示，页面的其余部分将同时向下滑动，为 div 内的内容腾出空间。相反，如果在显示内容时单击问号图像，它将向上滑动并隐藏自身，下面的页面也会向上滑动以填补空白。

我怎么写这个？我需要它可扩展，这样我就可以添加多个 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，您可以在头部使用以下内容：

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