Javascript 按钮单击-显示内容，隐藏以前的可见内容

我打算为按钮单击/显示内容提供以下功能：

1.按钮单击-切换内容块-工作

2.按钮双击-隐藏当前内容块（切换）-有效

3.当一个按钮处于活动状态时，单击其他按钮-隐藏活动按钮并显示用户单击的按钮。从不隐藏以前的内容-需要帮助：(

如果单击外侧内容块，则隐藏所有内容-有效

请给我指个方向。非常感谢

$（“.left quicklinks li”）。单击（函数（）{
var LinkButton=$（this）.attr（“数据按钮”），//在框之间切换的按钮
LinkContent=“div[data content=“+LinkButton+”]；//内容框“data button”和“data content”具有相同的值
$（链接内容）.fadeToggle（200）；
//控制台日志（链接按钮）；
//console.log（LinkContent）；
});
//单击页面上的任意位置时关闭元素
$（文档）.mouseup（函数（e）{
var container=$（'.left quicklinks'）；
如果（！container.is（e.target）&&container.has（e.target）.length==0）{
$（'.side content div'）。淡出（200）；
};
});
/*过程：
1.按钮单击-切换内容块-工作
2.按钮双击-隐藏当前内容块（切换）-有效
3.当一个按钮处于活动状态时，单击其他按钮-隐藏活动按钮并显示用户单击的按钮。-需要帮助：(
4.如果单击外侧内容块，则隐藏所有内容-工作
*/

。左快速链接{
背景#3F4018；
保证金：0；
填充：0；
文本对齐：居中；
}
.左快速链接李{
宽度：150px；
高度：150像素；
显示：内联块；
列表样式类型：无；
线高：150px；
文本对齐：居中；
背景#7E7F31；
颜色：#fff；
光标：指针；
字号：18px；
}
.左快速链接李：悬停{
背景：#ccc；
颜色：#333；
}
/*内容块*/
.附带内容{
宽度：100%；
高度：200px；
背景#7F7F57；
位置：相对位置；
}
.side content div{
高度：200px；
宽度：200px；
位置：绝对位置；
左：50%；
转化：translateX（-50%）；
背景：#CACC4E；
显示：无；
/*现在隐藏起来，尽情享受jquery*/
}
.侧面内容分区h1{
填充顶部：50px；
颜色：#333；
文本对齐：居中；
}

通知
我们的活动
提要
链接
关于我们

通知内容
活动内容
饲料含量
链接内容
关于我们的内容

$(".left-quicklinks li").click(function() {
  var LinkButton = $(this).attr("data-button"),
      LinkContent = $("div[data-content=" + LinkButton + "]");

  $("div[data-content]").not(LinkContent).fadeOut();
  LinkContent.fadeToggle(200);
});

---

现在很有魅力。一整天都在尝试不同的方法。谢谢