[英]Jquery Slide messing up other div's
我到达一个代码段时，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>
发生这种情况是因为下拉列表具有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"); }); });
.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; }
<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>
使用jQuery的上移过渡功能将div中的内容替换为其他内容
[英]Replace content in div with other content using a slide up transition with jQuery
使用jQuery向下滑动一个div而另一个可见divs（基于滑动内容的导航）
[英]using jQuery to slide one div down and the other visible divs up (sliding content based navigation)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.