슬라이드 jQuery를 토글하고 다른 페이지 요소에 영향을주지 않습니다.

내 페이지의 왼쪽에 그림이 있고, 클릭하면 다른 외부 링크를 위해 컨테이너가 열리도록하는 무효 링크가 있습니다. 컨테이너가 열렸을 때 영향을받지 않도록 웹 페이지의 스크롤이 필요합니다. 미리 감사드립니다.슬라이드 jQuery를 토글하고 다른 페이지 요소에 영향을주지 않습니다.

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

그림은 여기에 게시 할 수 없습니다.

출처

2011-01-03 dman

그림의 의미가 확실하지 않은 경우 - 여기에 문제가 있습니까? http://jsfiddle.net/andrewwhitaker/fDFBb/ –

사진이 열리는 토글의 아래쪽으로 스크롤됩니다. 컨테이너의 아래쪽으로 그림을 스크롤하지 않고 요소를 열어서 토글 링하고 싶습니다. – dman

정확하게 이해하면 브라우저를 페이지 상단으로 이동하지 않으시겠습니까? 그렇다면 href="#" 대신에 넣으십시오. href="javascript:;"

출처

2011-01-03 17:44:24

아니, 그게 아니야. 내 이미지는 페이지의 왼쪽에 있으며 내 토글 컨테이너는 오른쪽에 있습니다. 토글이 닫히면 토글 박스를 여는 링크 그림의 상단이 같은 높이, 즉 페이지의 같은 위치에 있습니다. 토글이 열리면 그림이 열려있는 컨테이너의 아래쪽을 만나도록 아래로 슬라이드하고 토글 컨테이너가 닫힐 때 자체를 다시 조정합니다. – dman

슬라이드 jQuery를 토글하고 다른 페이지 요소에 영향을주지 않습니다.

답변

관련 문제