jQuery切换…跳到页面顶部

Question

I'm using this script that I found on JS fiddle: http://jsfiddle.net/Q4PUw/2/

When I click on the toggle link, it toggles the box and displays it, however, it jumps back to the top of the page, and then I have to scroll down again to view the content that has been toggled.

What can I do to keep the page on that content so that users don't have to scroll down again to view the content?

Here is my code:

<style type="text/css">p.content-one {display:none;}</style>
<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$('.expand-one').click(function(){
    $('.content-one').slideToggle('slow');
});
});//]]>  
</script>
<div class="sitesection">
<p class="expand-one"><a href="#">Toggle Test Here</a></p>
<p class="content-one">
The content goes here
</p>
</div> 

Answer 1

remove href="#" in <a> tag

要么

If you dont want, remove a tag because you are using expand-one class in p tag

Answer 2

Try using event.preventDefault() as shown :-

$('.expand-one').click(function(event){
    event.preventDefault();
    $('.content-one').slideToggle('slow');
});