Javascript jQuery从菜单栏切换内容div

我很难让jQuery一次只允许一个内容DIV可见。因此，在菜单按钮（关于、新闻稿、联系人）之间单击，这将只允许一个内容DIV可见

---然后，当单击关联的菜单按钮时，content DIV需要隐藏（与当前一样）

---单击标题“头韵”，打开的任何内容div都需要隐藏

 $('#collapse_about').hide();
 $('#collapse_newsletter').hide();
 $('#collapse_contact').hide();

 $('#menu1').click(function() {
  $('#collapse_about').slideToggle(400);
   return false;
  });

 $('#menu2').click(function() {
  $('#collapse_newsletter').slideToggle(400);
   return false;
  });

 $('#menu3').click(function() {
  $('#collapse_contact').slideToggle(400);
   return false;
  });

---

我知道这是一段非常简单的代码。。。但它的形式让我难以理解。非常感谢您的帮助。

我会毫不犹豫地将所有菜单分配给同一个类，例如class1。然后制作具有回调函数的div slideUp。滑动完成后，它将滑下正确的面板

  $('#menu1').click(function() {
$(".class1").slideUp(function() {
  $('#collapse_about').slideDown(400);
   });
  });

 $('#menu2').click(function() {
$(".class1").slideUp(function() {
  $('#collapse_newsletter').slideDown(400);
   });
  });

 $('#menu3').click(function() {
$(".class1").slideUp(function() {
  $('#collapse_contact').slideDown(400);
   });
  });

编辑：这只是一个开始，但并没有完全按照您的要求执行：（

---

这是JSFIDLE上的演示：

它假设一个class1项在开始时是可见的，但事实并非如此！@redsquare，确切地说，slideUp的回调参数在元素完成动画制作时起作用。如果class1已经隐藏，则没有动画，因此回调会立即被调用，换句话说，它就像一个单击函数。对不起，我得到了错-我的意思是slideDown将被调用n次（每个.class1元素调用1次）@redsquare，我正在通过Id调用slideDown，这是在类上调用的slideup。如果在已隐藏的元素上调用slideup，用户将看不到任何反馈。当然，但这不是一个好的练习。它仍然可以毫无理由地工作，并且使用不同的代码（例如slideToggle）会导致重复动作看起来你需要一个手风琴的效果。