0

我的页面上有许多隐藏的列表元素。

我使用 jquery 来显示和隐藏它们，使用 slideToggle()。

我的 html 和 body 高度设置为 100%。

显示列表元素时，不能向下滚动页面，页面只有原始元素关闭时的高度。

当用户切换列表时，如何调整页面高度？

<article>
                <div class="sportType box rounded blue shadow textShadow"><img src="/assets/img/site/arrow_white.png" class="arrow icon rotate0"/><img src="/assets/img/site/snooker_icon.png" class="icon"/>Snooker</div>
                <ul id="snooker" class="sportMatches">
                    <li id ="snooker" class="box sub white shadow match">
                        <img src="/assets/img/site/arrow_black.png" class="icon sportMatchArrow rotate0"/>Joe Davis v John Lardner<span class="star starOff"></span>
                        <div class="sportOdds">
                            <ul>
                            <li><span class="oddsLeft">3:1</span><span class="oddsMiddle">Second Half</span><span class="oddsRight">57:21</span></li>
                            <li style="text-align:left;">Match Prices</li>
                            <li><span class=" oddsBox oddsLeft"><span>1</span> 13/5</span><span class="oddsBox oddsMiddle">X 4/5</span><span class="oddsBox oddsRight">2 12/5</span></li>
                            </ul>
                        </div>
                    </li>

                    <li id ="snooker" class="box sub white shadow match">
                        <img src="/assets/img/site/arrow_black.png" class="icon sportMatchArrow rotate0"/>Peter Lines v Liu Song<span class="star starOff"></span>
                        <div class="sportOdds">
                            <ul>
                            <li><span class="oddsLeft">3:1</span><span class="oddsMiddle">Second Half</span><span class="oddsRight">57:21</span></li>
                            <li style="text-align:left;">Match Prices</li>
                            <li><span class=" oddsBox oddsLeft"><span>1</span> 13/5</span><span class="oddsBox oddsMiddle">X 4/5</span><span class="oddsBox oddsRight">2 12/5</span></li>
                            </ul>
                        </div>
                    </li>

                    <li id ="snooker" class="box sub white shadow match">
                        <img src="/assets/img/site/arrow_black.png" class="icon sportMatchArrow rotate0"/>Chris Small v Supoj Saenla<span class="star starOff"></span>
                        <div class="sportOdds">
                            <ul>
                            <li><span class="oddsLeft">3:1</span><span class="oddsMiddle">Second Half</span><span class="oddsRight">57:21</span></li>
                            <li style="text-align:left;">Match Prices</li>
                            <li><span class=" oddsBox oddsLeft"><span>1</span> 13/5</span><span class="oddsBox oddsMiddle">X 4/5</span><span class="oddsBox oddsRight">2 12/5</span></li>
                            </ul>
                        </div>
                    </li>

                    <li id ="snooker" class="box sub white shadow match">
                        <img src="/assets/img/site/arrow_black.png" class="icon sportMatchArrow rotate0"/>Kurt Maflin v Joe Swail<span class="star starOff"></span>
                        <div class="sportOdds">
                            <ul>
                            <li><span class="oddsLeft">3:1</span><span class="oddsMiddle">Second Half</span><span class="oddsRight">57:21</span></li>
                            <li style="text-align:left;">Match Prices</li>
                            <li><span class=" oddsBox oddsLeft"><span>1</span> 13/5</span><span class="oddsBox oddsMiddle">X 4/5</span><span class="oddsBox oddsRight">2 12/5</span></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </article>



$(".sportType").click(function() {

    $(this).children('.arrow').toggleClass('rotate0').toggleClass('rotate90');
    $(this).parent().children('ul').slideToggle();

    $(this).toggleClass('rounded').toggleClass('topRounded');

});
4

0 回答 0