滚动到 slideToggle 的顶部

Question

我是 Web 开发领域的新手，运行遇到了 jQuery 的一些问题。我正在创建一个食物菜单并使用 slideToggle 功能来显示菜单的不同部分。

我想要做的是，当点击开关 (.food-item) 时，视口将滚动到相关点击开关的顶部。

这是当前的标记示例：

<div class="full-menu-container">
        <div class="menu-area">
            <!-- PRODUCT START --> 
            <div class="food-item">
                <h1 class="menu-title">Mains</h1>
                <?php if(get_field('menu_mains')): ?>
                    <div class="food-content">
                        <h2 class="food-header">Specials available, see today’s hot Specials Board</h2>
                        <?php while(has_sub_field('menu_mains')): ?>
                            <div class="menu-spacer">
                                <h2><?php the_sub_field('item_name'); ?></h2>
                                <div class="food-description">
                                    <p><?php the_sub_field('item_description'); ?></p>
                                    <h2><?php the_sub_field('item_price'); ?></h2>
                                </div>
                            </div>
                        <?php endwhile; ?>
                    </div>
                <?php endif; ?>
            </div>
            <!-- PRODUCT END --> 
            <!-- PRODUCT START --> 
            <div class="food-item">
                <h1 class="menu-title">sandwiches and melts</h1>
                <?php if(get_field('menu_sandwiches_melts')): ?>
                    <div class="food-content">
                        <p>Served on hand-cut white or malted wholemeal bloomer bread with fresh salad garnish and Pipers crisps.<br/><b>Add a mug of soup £2</b></p>
                        <?php while(has_sub_field('menu_sandwiches_melts')): ?>
                            <div class="menu-spacer">
                                <h2><?php the_sub_field('item_name'); ?></h2>
                                <div class="food-description">
                                    <p><?php the_sub_field('item_description'); ?></p>
                                    <h2><?php the_sub_field('item_price'); ?></h2>
                                </div>
                            </div>
                        <?php endwhile; ?>
                    </div>
                <?php endif; ?>
            </div>
            <!-- PRODUCT END --> 
        </div>
    </div>

这是 Jquery 我有：

jQuery(".food-content").first().slideToggle(500);
            jQuery('.food-item').click(function(){
                jQuery(".menu-container, .full-menu-container").siblings().find('.food-content').slideUp();
                jQuery(this).find('.food-content').slideDown();

就目前而言，我尝试使用 scrollTop 来尝试 return 视口到点击的开关，在本例中是 .food-item div，到目前为止没有成功.

以下是我尝试实现但没有成功的方法：

if(jQuery('.food-content').is(":visible")){
                         jQuery('html, body').animate({scrollTop: jQuery(this).offset().top})
                    }

任何人都可以提供进一步的帮助吗？谢谢！

Answer 1

我认为这符合您的描述。这是 fiddle：https://jsfiddle.net/o1s98kph/

jQuery(".food-content").hide();
jQuery(".food-content").first().slideToggle(500);

jQuery('.food-item').click(function(){
    var thisContent = jQuery(this).find('.food-content');
    if( ! thisContent.is(":visible")) { // Don't do anything if it is already showing
        jQuery('.food-content').hide(); // Close all other .food-content
        thisContent.slideDown(function(){
            jQuery('html, body').animate({scrollTop: thisContent.offset().top})
        });
    }
});

滚动到 slideToggle 的顶部

Scroll to the top of slideToggle

html

javascript

jquery

slidetoggle

scrolltop