0

4 つの画像を設定しています。画像の 1 つをクリックすると、画像 3 と 4 がスライドダウンします。そして、それらからdivが降りてくるようにします。申し訳ありませんが、私はこれに慣れていないことを認めなければなりません。愚かな質問である場合は申し訳ありませんが、何時間も試してみましたが、わかりません。どんな助けでも大歓迎です。

画像1 画像2

画像3 画像4

画像 1 をクリックすると、すべての画像が不要な位置に移動します。画像 2 をクリックすると、すべてが思いどおりに機能します (画像 3 と 4 が下にスライドし、画像 1 と 2 から div が下に移動します)。画像 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

最初は、1 つの .script タグに対して 1 つのスクリプト タグしか使用できませんready()。あなたの問題はCSSにあると思います。問題を正しく理解していれば、これがJSFiddleの解決策です。

于 2013-06-03T06:01:46.120 に答える