[英]jQuery scrollTop() doesn't work and returns zero
I'm trying to convert JavaScript into jQuery but it doesn't seem to work (alert returns zero). 我正在尝试将JavaScript转换为jQuery,但它似乎不起作用(警告返回零)。 In this thread " scrollheight of an element gives undefined value " I've learned that I should use scrollTop() jQuery function but it doesn't return what I want.
在此线程中,“ 元素的滚动高度给出了未定义的值 ”我了解到我应该使用jQuery函数scrollTop(),但它不会返回我想要的东西。
Edit: 编辑:
HTML code: HTML代码:
for (i = 0; i < accHeader.length; i++) {
accHeader[i].onclick = function() {
if ($(this).hasClass('active')) {
$('.accordion').removeClass('active');
$('.accordion-header').removeClass('active');
$('.panel').removeClass('active');
$('.panel').css('max-height', '');
$(this).next().next().removeClass("top-border");
} else {
$('.accordion').removeClass('active');
$('.accordion-header').removeClass('active');
$('.panel').removeClass('active');
$('.panel').css('max-height', '');
$(this).next().next().removeClass("top-border");
var accPanel = this.nextElementSibling;
var nextAcc = this.nextElementSibling.nextElementSibling;
$(this).addClass("active");
$(this).next().addClass('active');
$(this).next().next().addClass("top-border");
if (accPanel.style.maxHeight) {
accPanel.style.maxHeight = null;
} else {
accPanel.style.maxHeight = accPanel.scrollHeight + "px";
}
alert(accPanel.scrollHeight);
}
}
}
JS Works: JS Works:
for (i = 0; i < accNested.length; i++) {
accNested[i].onclick = function() {
if ($(this).hasClass('active')) {
$('.panel').removeClass('active');
$('.panel').css('max-height', '');
$('.panel-nested').removeClass('active');
$('.panel-nested').css('max-height', '');
$('.accordion').removeClass('active');
$('.accordion-header').removeClass('active');
$('.accordion-nested').removeClass('active');
$(this).next().next().removeClass("top-border");
} else {
$('.panel').removeClass('active');
$('.panel').css('max-height', '');
$('.panel-nested').removeClass('active');
$('.panel-nested').css('max-height', '');
$('.accordion').removeClass('active');
$('.accordion-header').removeClass('active');
$('.accordion-nested').removeClass('active');
$(this).next().next().removeClass("top-border");
var accPanel = $('.panel');
var nextAcc = this.nextElementSibling.nextElementSibling;
$('.panel-nested').addClass("active");
$('.accordion-nested').addClass('active');
$('.accordion-nested').addClass("top-border");
if (accPanel.css('max-height')) {
accPanel.css('max-height', '');
} else {
accPanel.css('max-height', accPanel.scrollTop() + "px");
}
alert(accPanel.scrollTop());
}
}
}
jQuery doesn't work: jQuery不起作用:
for (i = 0; i < accNested.length; i++) { accNested[i].onclick = function() { if ($(this).hasClass('active')) { $('.panel').removeClass('active'); $('.panel').css('max-height', ''); $('.panel-nested').removeClass('active'); $('.panel-nested').css('max-height', ''); $('.accordion').removeClass('active'); $('.accordion-header').removeClass('active'); $('.accordion-nested').removeClass('active'); $(this).next().next().removeClass("top-border"); } else { $('.panel').removeClass('active'); $('.panel').css('max-height', ''); $('.panel-nested').removeClass('active'); $('.panel-nested').css('max-height', ''); $('.accordion').removeClass('active'); $('.accordion-header').removeClass('active'); $('.accordion-nested').removeClass('active'); $(this).next().next().removeClass("top-border"); var accPanel = $('.panel'); var nextAcc = this.nextElementSibling.nextElementSibling; $('.panel-nested').addClass("active"); $('.accordion-nested').addClass('active'); $('.accordion-nested').addClass("top-border"); if (accPanel.css('max-height')) { accPanel.css('max-height', ''); } else { accPanel.css('max-height', accPanel.scrollTop() + "px"); } alert(accPanel.scrollTop()); } } }
I think you are using the jQuery scrollTop() function improperly. 我认为您使用的jQuery scrollTop()函数不正确。 It is not a CSS propery that you can assign to an element.
您不能为元素分配CSS属性。
Indeed, it is a function, so you cannot do : 确实,它是一个函数,所以您不能执行以下操作:
accPanel.css('max-height', accPanel.scrollTop() + "px")
If you want to add as CSS property the max-height you should use .height : 如果要将max-height添加为CSS属性,则应使用.height :
accPanel.height();
Hope this could help, 希望这会有所帮助,
Laura. 劳拉
Here there is -I hope- the result you want to achieve: 这里是-我希望-您想要达到的结果:
<!DOCTYPE html>
<html>
<head>
<script>*INCLUDE YOUR JQUERY LIBRARY*</script>
<style type="text/css">
#div{
border: 1px solid black;
width:900px;
height: 900px;
max-height: 2px;
}
</style>
</head>
<body>
<div id="div">My div</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
var accPanel = $('#div');
var maxHeigth = $('#div').css( "max-height" );
var height = accPanel.height();
if (maxHeigth == 'none') {
console.log('No max-height set by default.')
console.log('Changing to ', height)
accPanel.css('max-height', accPanel.height() + "px");
} else {
console.log('Currently it has max-height equal to ', height)
console.log('Changing to 0px');
accPanel.css('max-height', '0px');
}
});
</script>
</html>
Try it in your browser as it is, I've added some log shown into the console that should help. 尝试在浏览器中进行尝试,我在控制台中添加了一些日志,该日志应该会有所帮助。
Let me know, Laura 让我知道,劳拉
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.