jQuery 手风琴自动面板 - 如何防止页面滚动？
不确定我是否真的使用了手风琴小部件，因为它应该被使用，但我已经自动显示了面板，以便站点查看者无需单击即可看到每个面板。
问题是，如果用户在手风琴循环时向下滚动，页面会跳回到下一个打开的面板。我尝试过各种返回 false 并尝试删除 html 中的 href 标签。
这是最少的代码：
<script type="text/javascript">
$(function(){
$("#accordion").accordion({ header: "h3"});
});
itemid=0;
setInterval ("doSomething()", 2000 );
function doSomething(){
itemid++;
$("#accordion").accordion( "activate" , itemid);
if (itemid==2){itemid=-1};
}
</script>
</head>
<body>
<div id="accordion">
<div>
<h3 style="font-weight:bold;"><a href="#">title1</a></h3>
<div>content1</div>
<div>
<h3 style="font-weight:bold;"><a href="#">title2</a></h3>
<div>content2</div>
</div>
<div>
<h3 style="font-weight:bold;"><a href="#">title3</a></h3>
<div>content3</div>
</div>
</div>
<br />
....
有人有想法让我尝试吗？
谢谢。
Not sure I'm really using the accordion widget as it's meant to be used but I've automated the showing of the panels so that site viewers can see each panel without clicking.
Problem is if the user scrolls down while the accordion is cycling, the page jumps back up to the next opening panel. I've tried all sorts of return falses and tried deleting the href tags in the html.
Here's minimal code:
<script type="text/javascript">
$(function(){
$("#accordion").accordion({ header: "h3"});
});
itemid=0;
setInterval ("doSomething()", 2000 );
function doSomething(){
itemid++;
$("#accordion").accordion( "activate" , itemid);
if (itemid==2){itemid=-1};
}
</script>
</head>
<body>
<div id="accordion">
<div>
<h3 style="font-weight:bold;"><a href="#">title1</a></h3>
<div>content1</div>
<div>
<h3 style="font-weight:bold;"><a href="#">title2</a></h3>
<div>content2</div>
</div>
<div>
<h3 style="font-weight:bold;"><a href="#">title3</a></h3>
<div>content3</div>
</div>
</div>
<br />
....
Anyone have ideas for me to try?
Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这是浏览器渲染“问题”。您可以使用 Firebug 复制它。请注意，当有很多内容时向下滚动页面，并通过将 css 属性设置为 display:none 来隐藏第一个内容（基本上是动画执行的操作）。然后页面会自动跳转到顶部。
一种选择是存储动画前的当前滚动位置，然后在动画完成后滚动到该位置，尽管这非常难看。
另一个选项是将内容的高度限制为小于平均页面大小，这样您的滚动条就会出现在活动内容上，而不是整个屏幕上。
恕我直言，无论如何，它看起来都不会很好。如果我是一名设计师，我会建议重新思考设计。如果您需要大量信息，我不会将其放在自动变化的手风琴中。
This is a browser rendering "issue". You can replicate it using Firebug. Notice if you scroll down the page when there is a lot of content and you hide the first content by setting the css property to display:none (basically what it is animated to do). Then the page will automatically jump to the top.
One option is to store the current scroll position pre-animation and then scroll to that position once the animation finishes, although this is quite ugly.
The other option is to restrict the height of your content to be less than the average page size, you would then have the scrollbar on the active content rather than the whole screen.
IMHO, either way it's not going to look nice. If I were a designer I would suggest a design rethink. If you are going to have large amounts of information I wouldn't be sticking it in an auto changing accordion.