javascript - 滑动切换一旦点击就不会保持不动？

Question

我正在制作一个菜单，并遇到了一些 jQuery 问题。

我希望我的切换按钮在被单击后保持向上状态，但它们会向上滑动，然后又直接向下滑动。

到目前为止，我已经设法同时关闭一个和另一个打开。有什么想法吗？

这是当前的 JS:

jQuery(".food-content").hide();
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();
});

我做了一个 JS fiddle :

https://jsfiddle.net/marmaaduke/uyb4Lzuy/

Answer 1

只需排除从 slideUp 中单击的当前项目(使用 not)，并对当前项目使用 slideToggle。

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

https://jsfiddle.net/TrueBlueAussie/uyb4Lzuy/1/