gpt4 book ai didi

影响页面上其他元素的 jQuery 切换元素

转载 作者:行者123 更新时间:2023-11-28 19:03:39 26 4
gpt4 key购买 nike

堆栈溢出不允许我编写插入图片的代码,但我在页面上有一张图片与滑动切换元素的高度相同。当切换容器关闭时,图片与切换按钮处于同一级别。打开切换容器时,图片将页面向下滚动到切换元素的底部。当您关闭切换容器时,图片将返回到其原始位置。如何预防?

谢谢,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script type="text/javascript" src="jquery.js">
</script>
<style type="text/css">
*, * focus {
outline: none;
margin: 0;
padding: 0;
}

.container {
width: 500px;
float:right;
margin: 0 auto;
}
h1 {
font: 4em normal Georgia, 'Times New Roman', Times, serif;
text-align:center;
padding: 10px 0;
color: #aaa;
}
h2.trigger {
padding: 0 0 0 0;
margin: 0 0 5px 0;

height: 46px;
line-height: 46px;
width: 450px;
font-size: 2em;
font-weight: normal;
float: right;
}
h2.trigger a {
color: gray;
text-decoration: none;
display: block;
float:right;
}
h2.trigger a:hover {
color: #ccc;
}
h2.active {background-position: left bottom;}
.toggle_container {
margin: 0 0 5px;
padding: 0;
border-top: 1px solid #d6d6d6;

overflow: hidden;
font-size: 1.2em;
width: 350px;
clear: both;
float:right;
}
.toggle_container .block {
padding: 5px;

}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('#nav li').hover(
function () {
//show its submenu
$('ul', this).slideDown(250);
},
function () {
//hide its submenu
$('ul', this).slideUp(250);

}
);
$(".toggle_container").hide();

$("h2.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("fast");
});

});
</script>
<h2 class="trigger"><a href="#"> Popular Links</a></h2>
<div class="toggle_container">
<div class="block">
<p>links</p>
<p>more links</p>
</div>
</div>
</div>

最佳答案

如果您只是想防止图片滑动,请将其 css position 属性更改为 absolute。示例

#yourpicid {
position: absolute;
top: 100px;
left: 200px;
}

如果您希望相对于周围元素的位置是绝对的,则将周围元素的位置属性发送给相对位置。示例

#surroundingElementId {
position: relative;
}

祝你好运

关于影响页面上其他元素的 jQuery 切换元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4587034/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com