我有一个jquery幻灯片的问题,因为我已经提供了一个代码片段,可以向您显示问题
现在,当我点击wrapper3head下拉包装3信息时,它会向下推3个垫片形状
我的问题是2个包装纸现在靠近垫子但它仍然将它们推下来
当我点击wrapper3head
时,我正在寻找帮助以获得3个垫形状如果您运行代码段,您将看到我的意思只需单击选择内存样式div
$(document).ready(function(){
$("#wrapper3head").click(function(){
$("#wrapper3").slideToggle("fast");
});
});
$(document).ready(function(){
$("#Informationhead").click(function(){
$("#Information").slideToggle("fast");
});
});
.wrapper {
position: relative;
width: 1000px;
margin: 0 auto;
border: 5px groove #8E2B2B;
border-radius: 15px;
}
.wrapper2{
position: relative;
width: 652px;
margin: 0 auto;
border: 5px groove #8E2B2B;
border-radius: 15px;
}
.wrapper3head{
position: relative;
width: 200px;
margin: 0 auto;
border: 5px groove #8E2B2B;
border-radius: 15px;
text-align:center;
float:right;
margin-right:1%;
}
.wrapper3{
position: relative;
width: 185px;
margin: 0 auto;
display:none;
border: 5px groove #8E2B2B;
text-align:center;
float:right;
margin-right:1%;
}
.Informationhead{
position: relative;
width: 652px;
margin: 0 auto;
border: 5px groove #8E2B2B;
border-radius: 15px;
text-align:center;
}
.Information{
position: relative;
width: 635px;
margin: 0 auto;
display:none;
border: 5px groove #8E2B2B;
text-align:center;
}
.back {
position: relative;
width: 648px;
height: 648px;
z-index: 0;
background-color: #000;
border:3.5px ridge white;
border-radius: 310px;
}
.pad {
width: 300px;
height: 300px;
float: left;
z-index: 1;
margin: 10px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 0.6;
}
.shape1 {
border-top-left-radius: 300px;
background-color: green;
border:2.5px groove white;
}
.shape2 {
float: left;
border-top-right-radius: 300px;
background-color: red;
clear: right;
border:2.5px groove white;
position: relative;
}
.shape3 {
float: left;
border-bottom-left-radius: 300px;
background-color: yellow;
clear: left;
border:2.5px groove white;
}
.shape4 {
float: left;
border-bottom-right-radius: 300px;
background-color: blue;
border:2.5px groove white;
}
.Timer {
position: absolute;
top: 195px;
left: 195px;
width: 250px;
height: 250px;
background: #000;
border-radius: 125px;
border:2.5px solid White;
z-index: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<br />
<center><img src="Media/GroupLogo1.png" alt="Logo" height="200" width="250"></center>
<br />
<div class="Informationhead"id="Informationhead">Information</div>
<div class="Information"id="Information">
<p>Hello</p>
</div>
<div class="wrapper">
<div class="wrapper3head"id="wrapper3head">Choose Your Memory Style</div>
<br />
<br />
<div class="wrapper3"id="wrapper3">
<p>Do You Want Sound ?</p>
<input type="checkbox" value="No" style="color: Black;" id="sound">Yes
<p>Do You want Flashes ?</p>
<input type="checkbox" value="No" style="color: Black;" id="flash">Yes
<p>Do You want Text ?</p>
<input type="checkbox" value="No" style="color: Black;" id="text">Yes
</div>
<div class="back">
<div class="pad shape1" data-pad="1">
<audio preload="auto" class="sound1">
<source src="Media/sounds/mp3/sounds_01.mp3" type="audio/mpeg"/>
<source src="Media/sounds/ogg/sounds_01.ogg" type="audio/ogg"/>
</audio>
</div>
<div class="pad shape2" data-pad="2">
<audio preload="auto" class="sound2">
<source src="Media/sounds/mp3/sounds_02.mp3" type="audio/mpeg"/>
<source src="Media/sounds/ogg/sounds_02.ogg" type="audio/ogg"/>
</audio>
</div>
<div class="Timer">
<br />
<br />
<br />
<br />
<br />
<center><p><b><i>Time starts when you click start</i></b></p></center>
</div>
<div class="pad shape3" data-pad="3">
<audio preload="auto" class="sound3">
<source src="Media/sounds/mp3/sounds_03.mp3" type="audio/mpeg"/>
<source src="Media/sounds/ogg/sounds_03.ogg" type="audio/ogg"/>
</audio>
</div>
<div class="pad shape4" data-pad="4">
<audio preload="auto" class="sound4">
<source src="Media/sounds/mp3/sounds_04.mp3" type="audio/mpeg"/>
<source src="Media/sounds/ogg/sounds_04.ogg" type="audio/ogg"/>
</audio>
</div>
</div>
</div>
答案 0 :(得分:1)
这种情况正在发生,因为下拉列表的位置为relative
。您需要为其设置absolute
位置,以便在打开页面时不会影响页面上的任何其他元素。将此CSS添加到样式表将解决问题:
.wrapper3 {
position: absolute;
right: 0px;
}
这是一个有效的演示:
$(document).ready(function() {
$("#wrapper3head").click(function() {
$("#wrapper3").slideToggle("fast");
});
});
$(document).ready(function() {
$("#Informationhead").click(function() {
$("#Information").slideToggle("fast");
});
});
&#13;
.wrapper {
position: relative;
width: 1000px;
margin: 0 auto;
border: 5px groove #8E2B2B;
border-radius: 15px;
}
.wrapper2 {
position: relative;
width: 652px;
margin: 0 auto;
border: 5px groove #8E2B2B;
border-radius: 15px;
}
.wrapper3head {
position: relative;
width: 200px;
margin: 0 auto;
border: 5px groove #8E2B2B;
border-radius: 15px;
text-align: center;
float: right;
margin-right: 1%;
}
.wrapper3 {
position: absolute;
right: 0px;
width: 185px;
margin: 0 auto;
display: none;
border: 5px groove #8E2B2B;
text-align: center;
float: right;
margin-right: 1%;
}
.Informationhead {
position: relative;
width: 652px;
margin: 0 auto;
border: 5px groove #8E2B2B;
border-radius: 15px;
text-align: center;
}
.Information {
position: relative;
width: 635px;
margin: 0 auto;
display: none;
border: 5px groove #8E2B2B;
text-align: center;
}
.back {
position: relative;
width: 648px;
height: 648px;
z-index: 0;
background-color: #000;
border: 3.5px ridge white;
border-radius: 310px;
}
.pad {
width: 300px;
height: 300px;
float: left;
z-index: 1;
margin: 10px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 0.6;
}
.shape1 {
border-top-left-radius: 300px;
background-color: green;
border: 2.5px groove white;
}
.shape2 {
float: left;
border-top-right-radius: 300px;
background-color: red;
clear: right;
border: 2.5px groove white;
position: relative;
}
.shape3 {
float: left;
border-bottom-left-radius: 300px;
background-color: yellow;
clear: left;
border: 2.5px groove white;
}
.shape4 {
float: left;
border-bottom-right-radius: 300px;
background-color: blue;
border: 2.5px groove white;
}
.Timer {
position: absolute;
top: 195px;
left: 195px;
width: 250px;
height: 250px;
background: #000;
border-radius: 125px;
border: 2.5px solid White;
z-index: 10;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<br />
<center>
<img src="Media/GroupLogo1.png" alt="Logo" height="200" width="250">
</center>
<br />
<div class="Informationhead" id="Informationhead">Information</div>
<div class="Information" id="Information">
<p>Hello</p>
</div>
<div class="wrapper">
<div class="wrapper3head" id="wrapper3head">Choose Your Memory Style</div>
<br />
<br />
<div class="wrapper3" id="wrapper3">
<p>Do You Want Sound ?</p>
<input type="checkbox" value="No" style="color: Black;" id="sound">Yes
<p>Do You want Flashes ?</p>
<input type="checkbox" value="No" style="color: Black;" id="flash">Yes
<p>Do You want Text ?</p>
<input type="checkbox" value="No" style="color: Black;" id="text">Yes
</div>
<div class="back">
<div class="pad shape1" data-pad="1">
<audio preload="auto" class="sound1">
<source src="Media/sounds/mp3/sounds_01.mp3" type="audio/mpeg" />
<source src="Media/sounds/ogg/sounds_01.ogg" type="audio/ogg" />
</audio>
</div>
<div class="pad shape2" data-pad="2">
<audio preload="auto" class="sound2">
<source src="Media/sounds/mp3/sounds_02.mp3" type="audio/mpeg" />
<source src="Media/sounds/ogg/sounds_02.ogg" type="audio/ogg" />
</audio>
</div>
<div class="Timer">
<br />
<br />
<br />
<br />
<br />
<center>
<p><b><i>Time starts when you click start</i></b>
</p>
</center>
</div>
<div class="pad shape3" data-pad="3">
<audio preload="auto" class="sound3">
<source src="Media/sounds/mp3/sounds_03.mp3" type="audio/mpeg" />
<source src="Media/sounds/ogg/sounds_03.ogg" type="audio/ogg" />
</audio>
</div>
<div class="pad shape4" data-pad="4">
<audio preload="auto" class="sound4">
<source src="Media/sounds/mp3/sounds_04.mp3" type="audio/mpeg" />
<source src="Media/sounds/ogg/sounds_04.ogg" type="audio/ogg" />
</audio>
</div>
</div>
</div>
&#13;