0

我设置了 4 个图像，我希望图像 3 和 4 在单击其中一个图像时向下滑动。我想要一个 div 从他们身上下来。对不起，我必须承认我是新手，如果这是一个愚蠢的问题，我很抱歉，但我已经尝试了几个小时但无法弄清楚。任何帮助将非常感激。

图 1 图 2

图 3 图 4

当我单击图像 1 时，我的所有图像都会移动到不需要的位置。当我单击图像 2 时，一切都按我的意愿工作（图像 3 和 4 向下滑动，我的 div 从图像 1 和 2 下来）。图 3 也可以正常工作。当我单击图像 4 时，除图像 4 之外的所有图像都正确移动，并且它移动到一个奇怪的位置。

这是我的CSS：

.image1{position:relative;top:-10px;left:-10px;margin:10px;}
.image2{position:relative;top:-10px;left:25%;margin:10px;}
.image3{position:relative;top:0px;left:-10px;margin:10px;}
.image4{position:relative;top:0px;left:25%;margin:10px;}

body{left:20%;width:60%;height:110%;padding:10px;
     background-color:white;position:absolute;
     margin:0px;opacity:0.9;filter:alpha(opacity=90);
      /* For IE8 and earlier */-webkit-box-shadow:  6px 6px 50px 5px rgba(0, 0, 0, .5);
     box-shadow:  6px 6px 50px 5px rgba(0, 0, 0, .5);
    border-radius:4px;
    background-color:#0033ff;}

#panel,#panel2,#panel3,#panel4{
display:none;padding:400px;margin:auto;}

#panel,#flip,#panel2,#panel3,#panel4,#flip2,#flip3,#flip4{
padding:5px;text-align:center;background-color:#e5eecc;
border:solid 1px #c3c3c3;}

这是我的 HTML

`enter code here`<img src = "pics/dog.jpg" id="flip" class ="image1"/>
<div id="panel">Hello world! test one</div>

<img src = "pics/dog.jpg" id="flip2" class ="image2"/>
 <div id="panel2">Hello world! test two</div>

<div id="panel3">Hello world! test three</div>
<img src = "pics/dog.jpg" id="flip3" class ="image3"/>

<div id="panel4">Hello world! test four</div>
<img src = "pics/dog.jpg" id="flip4" class ="image4" />

这是我的脚本：

enter code here

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>
  <script> 
$(document).ready(function(){
  $("#flip2").click(function(){
    $("#panel2").slideToggle("slow");
  });
});
</script>
<script> 
$(document).ready(function(){
  $("#flip3").click(function(){
    $("#panel3").slideToggle("slow");
  });
});
</script>
<script> 
$(document).ready(function(){
  $("#flip4").click(function(){
    $("#panel4").slideToggle("slow");
  });
});
</script>
4

1 回答 1

0

起初，您只能将一个脚本标签与一个ready(). 我认为您的问题出在您的 CSS 中。如果我正确理解了问题，这是JSFiddle中的解决方案。

于 2013-06-03T06:01:46.120 回答