单击时动态显示 div

Question

我基本上是在尝试复制 what you get on google images，其中 div 出现在包含被单击的锚点的图像行正下方的 onClick 事件中。我找到了显示和隐藏方法的代码，非常简单，如下所示：

$(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;" />';
  });

});

但是我无法绕过 div 出现在 HTML 中的任何位置。例如，在下面的代码中，带有图像和文本的 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"> </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 用于 select 元素并对它们应用 CSS 等等。您可以在他们的网站上了解很多关于 jQuery 的信息： http://api.jquery.com/id-selector/

CSS 提供动画，'transitions'。一个盒子的开口会改变大小（例如高度），你想在特定 div.

的 CSS 中的高度属性上放置一个过渡标签

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

Answer 2

您已将 document.getElementById("displayImage").innerHTML 放置在 $('a').click(function () { 中，而标记中根本没有锚标记。将代码放入 document.ready

$(document).ready(function () {

    $("#hide").click(function () {
        $("#imageBox").hide("slow");
    });
    document.getElementById("displayImage").innerHTML = '<img src = "http://www.clipartbest.com/cliparts/7Ta/MBz/7TaMBzMqc.png" width="30px" height="30px" style="margin:20px;" />';
    $('a').click(function () {
        $("#imageBox").show("slow");

    });

});

DEMO FIDDLE

注意：无法理解您的 $('a').click(function () {，因为我在标记中看不到任何锚标记。

评论后更改:

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

    $('a').click(function () {
        $("#imageBox").show("slow");
        document.getElementById("displayImage").innerHTML = '<img src = "http://www.clipartbest.com/cliparts/7Ta/MBz/7TaMBzMqc.png" width="30px" height="30px" style="margin:20px;" />';

    });

});

UPDATED FIDDLE

Answer 3

你可以试试

 $('button funtion').on('click', function(event) {

            $('sample1').className;
            $('sample1').removeClassName('hidden');
            $('sample1').className;

            $('sample2').className;
            $('sample2').addClassName('hidden');
            $('sample2').className;

        });

必须在 css

中创建属性隐藏

hidden {
visibility: hidden;

}

或者你可以搜索 toogle class，这个方法反转属性

$("button").click(function(){

$("p").toggleClass("hidden"); });

单击时动态显示 div

display div dynamically on click

javascript

jquery