Question

堆栈溢出不会让我编写插入图片的代码，但我在页面上的图片高度上有一张图片作为滑动切换元素。当切换容器关闭时，图片与切换按钮处于同一级别。打开切换容器时，图片向下滚动页面到切换元素的底部。关闭切换容器时，图片将返回其原始位置。如何防止这种情况？

谢谢，

<!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>

Answer 1

如果您只是想让图片不滑动，请将其css position属性更改为absolute。实施例

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

如果你希望该位置是绝对的，参考一个surronding元素发送周围的元素position属性为relative。实施例

#surroundingElementId {
   position: relative;
}

祝你好运

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

1 个答案: