Question

我基本上试图通过直接位于包含所点击锚点的图像行下方的onClick事件中显示的div来复制您在谷歌图像上获得的内容。我找到了show和hide方法的代码非常简单，如下所示：

$(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等等，我建议从W3School开始： 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类，此方法会反转属性

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

$（＆＃34; P＆＃34）。toggleClass（＆＃34;隐藏＆＃34）; }）;

点击动态显示div

3 个答案: