jQuery toggle element effecting other elements on page_问答_开发者

jQuery toggle element effecting other elements on page

开发者 https://www.devze.com 2023-02-02 00:37 出处：网络

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开发者_如

相关专题：css jquery

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

jQuery toggle element effecting other elements on page

精彩评论

关注公众号

热门标签

图文推荐

jQuery toggle element effecting other elements on page

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：