我对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尝试将视口返回到单击的切换,在这种情况下是.food-item div,到目前为止没有成功。
这是我试图实现的,没有运气:
if(jQuery('.food-content').is(":visible")){
jQuery('html, body').animate({scrollTop: jQuery(this).offset().top})
}
任何人都可以进一步提供帮助吗? 谢谢!
答案 0 :(得分:0)
我认为这就是你所描述的。 这是一个小提琴: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})
});
}
});