Question

我正在尝试将JavaScript转换为jQuery，但它似乎不起作用（警报返回零）。在这个帖子“scrollheight of an element gives undefined value”我已经知道我应该使用scrollTop（）jQuery函数，但它不会返回我想要的内容。

修改：

HTML code：

Istorija（paspauskite）

<div class="panel">
    <table>
        <tr style="border-top: none;">
            <td>Dėl tvarkos, visi sąrašai yra 30 įrašų ilgio, išskyrus sąskaitos papildymus bei lėšų išsiėmimus.</td>
        </tr>
    </table>
</div>
<div class="panel-nested-parent active" style="max-height: 94px;">
    <table>
        <tbody>
            <tr>
                <th>Pelnas nuo įsigytų (1 kaimynas)</th>
            </tr>
        </tbody>
    </table>
    <table>
        <tbody>
            <tr style="border: none;">
                <td style="vertical-align: top; padding: 0;">
                    <button style="border-right: none;" class="accordion-nested">Gyvulių (5%)</button>
                    <div class="panel-nested">
                        <table>
                            <tbody>
                                <tr style="border: none;">
                                    <th style="background: #21aedb; border-left: 1px solid #1f76a1;">Gyvulys</th>
                                    <th style="background: #21aedb; border-left: 1px solid #1f76a1;">Kiekis</th>
                                    <th style="background: #21aedb; border-left: 1px solid #1f76a1; border-right: 1px solid #1f76a1;">Pelnas</th>
                                </tr>
                                <tr>
                                    <td>Višta</td>
                                    <td>1 vnt.</td>
                                    <td>1 Eur</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
                <td style="vertical-align: top; padding: 0;">
                    <button style="border-right: none;" class="accordion-nested">Fermų (10%)</button>
                    <div class="panel-nested">
                        <table>
                            <tbody>
                                <tr>
                                    <th style="background: #21aedb; border-left: 1px solid #1f76a1;">Ferma</th>
                                    <th style="background: #21aedb; border-left: 1px solid #1f76a1;">Kiekis</th>
                                    <th style="background: #21aedb; border-left: 1px solid #1f76a1; border-right: 1px solid #1f76a1;">Pelnas</th>
                                </tr>
                                <tr>
                                    <td>Vištidė</td>
                                    <td>1 vnt.</td>
                                    <td>1 Eur</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
                <td style="vertical-align: top; padding: 0;">
                    <button style="border-right: none;" class="accordion-nested">Fabrikų (10%)</button>
                    <div class="panel-nested">
                        <table>
                            <tbody>
                                <tr>
                                    <th style="background: #21aedb; border-left: 1px solid #1f76a1;">Fabrikas</th>
                                    <th style="background: #21aedb; border-left: 1px solid #1f76a1;">Kiekis</th>
                                    <th style="background: #21aedb; border-left: 1px solid #1f76a1; border-right: 1px solid #1f76a1;">Pelnas</th>
                                </tr>
                                <tr>
                                    <td>Tešlos</td>
                                    <td>1 vnt.</td>
                                    <td>1 Eur</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
                <td style="vertical-align: top; padding: 0;">
                    <button class="accordion-nested">Kepyklų (10%)</button>
                    <div class="panel-nested">
                        <table>
                            <tbody>
                                <tr>
                                    <th style="background: #21aedb; border-left: 1px solid #1f76a1;">Kepykla</th>
                                    <th style="background: #21aedb; border-left: 1px solid #1f76a1;">Kiekis</th>
                                    <th style="background: #21aedb; border-left: 1px solid #1f76a1; border-right: 1px solid #1f76a1;">Pelnas</th>
                                </tr>
                                <tr>
                                    <td>Blynų su mėsa</td>
                                    <td>1 vnt.</td>
                                    <td>1 Eur</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>


var accHeader = document.getElementsByClassName("accordion-header");
var acc = document.getElementsByClassName("accordion");
var accNestedParent = document.getElementsByClassName("accordion-nested-parent");
var accNested = document.getElementsByClassName("accordion-nested");
var panelNested = document.getElementsByClassName("panel-nested");

JS作品：

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);
        }
    }
}

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());
        }
    }
}

Answer 1

我认为你正在使用jQuery scrollTop（）函数不正确。您不能将CSS属性分配给元素。

确实，这是一个功能，所以你做不到：

accPanel.css('max-height', accPanel.scrollTop() + "px")

如果要添加CSS属性，则应使用.height：

添加max-height

accPanel.height();

希望这可以提供帮助，

劳拉。

Answer 2

这里有 - 我希望 - 你想要实现的结果：

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

在浏览器中尝试使用它，我已经在控制台中添加了一些应该有用的日志。

让我知道，劳拉

jQuery scrollTop（）不起作用并返回零

2 个答案: