jQuery toggle element effecting other elements on page
Stack overflow wouldn't let me write the code to insert a picture but I have a picture at the same height on the page as a sliding toggle element. When the toggle container is closed, the pict开发者_如何学Goure is at the same level as the toggle button. When the toggle container is opened, the picture scrolls down the page to the bottom of the toggle element. When you close the toggle container, the picture returns to its original position. How can this be prevented?
Thanks,
<!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>
If you are simply trying to keep the picture from sliding, change its css position property to absolute. Example
#yourpicid {
position: absolute;
top: 100px;
left: 200px;
}
And if you want the position to be absolute with reference to a surronding element sent the surrounding elements position property to relative. Example
#surroundingElementId {
position: relative;
}
Good luck
加载中,请稍侯......
精彩评论