gpt4 book ai didi

javascript - 选择同一类中的 div

转载 作者:行者123 更新时间:2023-11-28 06:24:54 25 4
gpt4 key购买 nike

我有一个 jquery 难题。有人可以帮我选择要滚动到的适当的 div 吗?现在它适用于第一个,但其他的则不起作用。这是代码:https://jsfiddle.net/fwm4ot69/

这是JS代码

$(document).ready(function() {
//hide answers or hide in css
$('.acc_content').hide();
$('.acctitle').click(function() {
//show this answer
$(this).next().slideToggle('1000');
//Hide the other panels
$(".acc_content").not($(this).next()).slideUp('fast');
$.scrollTo($(this), 1000);
});
});

这是我的html

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<script src="//code.jquery.com/jquery-1.12.0.min.js">
</script>
<div class="accordion">
<div class="acctitle">
<h3>What is This?</h3>
</div>
<div class="acc_content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

<div class="acctitle">
<h3>What is This?</h3>
</div>
<div class="acc_content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

<div class="acctitle">
<h3>What is This?</h3>
</div>
<div class="acc_content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</body>
</html>

What can i do to make the screen start on the selected question, esp on a mobile device?

THanks

最佳答案

首先,您的 fiddle 显示控制台错误。 $.scrollTo 不是函数。也许您没有导入库,或者可能只是因为它不在 fiddle 库中?不管怎样...

您可以将 $.scrollTo($(this), 1000); 更改为:

$('html,body').animate({scrollTop: $(this).offset().top}, 1000);

如果您console.log($(this).offset().top),您将看到它返回一个有效的偏移量。只有当页面足够长才能滚动时,才会跳转到该部分,并且只会滚动到页面底部。

现在,您的问题似乎是在问如何在页面加载时跳转到问题。如果是这种情况,您可以尝试简单的方法...

html:

<div class="acctitle" id="question-1">
<h3>What is This?</h3>
</div>

然后您可以通过网址访问:www.somedomain.com#question-1这将锚定到该 ID。但在js中你可以添加:

$(document).ready(function(){
if(window.location.hash)
{
$('html,body').animate({scrollTop: $(window.location.hash).offset().top}, 1000, function(){
$(window.location.hash).next().slideDown(1000);
});
}
});

它应该加载页面并扩展所请求的问题。首先它会滚动,然后展开。

如果这不是您想要的,请告诉我。

关于javascript - 选择同一类中的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35212977/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com