javascript - 点击时动态显示div

Question

我基本上试图复制您在谷歌图像上获得的内容，其中包含单击的 anchor 的图像行正下方的 onClick 事件中出现的 div。我找到了显示和隐藏方法的代码，这非常简单，如下所示:

$(document).ready(function(){

  $("#hide").click(function(){
    $("#imageBox").hide("slow");
  });

  $('a').click(function(){
    $("#imageBox").show("slow");
    document.getElementById("displayImage").innerHTML = '<img src = "images/profiles/male-silhouette.jpg" style="margin:20px;" />';
  });

});

但是，无论我将其放置在 HTML 中的何处，我都无法避免出现该 div。例如，在下面的代码中，带有图像和文本的 div 显然总是出现在第一个和第二个列表之间的同一位置:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
 <div id="imageBox">
  <button id="hide" class="hButton">X Close</button>
  <p id="displayImage">&nbsp;</p>
 </div>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

在 Google 和 Stack Overflow 上搜索之后，我什至还没有接近学习如何做到这一点。谁能指出一些开源代码或教程吗？

Answer 1

jQuery 用于选择元素并向其应用 CSS 等等。您可以在他们的网站上了解有关 jQuery 的很多信息: http://api.jquery.com/id-selector/

CSS 提供动画和“过渡”。盒子的开口会改变大小(例如高度)，并且您需要在特定 div 的 CSS 中的 height 属性上放置一个过渡标签。

http://css3.bradshawenterprises.com/transitions/

要学习 jQuery、CSS、HTML 等，我建议从 W3Schools 开始: http://www.w3schools.com/default.asp

http://www.w3schools.com/css/css3_intro.asp http://www.w3schools.com/jquery/default.asp