Javascript 重构jQuery重复模式

我把自己画进了一个角落，以便快速地制作原型。 重构以下jQuery代码的最佳方法是什么？它的功能是在一些侧栏导航项之间切换。我需要它更具动态性，以便可扩展

您会将ID添加到if语句中的数组中，并对它们进行迭代吗？使用变量？创建一个函数并在html端调用它onClick？不管我怎么想，它仍然会导致大量重复代码

谢谢大家!

//切换左导航
$（“#设置单击”）。单击（函数（）{
如果（$（“#addContainer，#noteContainer，#logoContainer，#themeconainer'）。是（“：可见”）{
$（#addContainer'）。slideUp（350）；
$（#notecainer'）。slideUp（350）；
$（'logoContainer'）。slideUp（350）；
$（“#设置容器”）。向下滑动（350）；
$（#ThemeSecontainer'）。幻灯片（350）；
}否则{
$（“#设置容器”）。滑动切换（350）；
}
});
$（'#addClick'）。单击（函数（）{
如果（$（“#设置容器、#noteContainer、#logoContainer、#themeContainer'）。为（“：可见”）{
$（“#设置容器”）。幻灯片（350）；
$（#notecainer'）。slideUp（350）；
$（'logoContainer'）。slideUp（350）；
$（#addContainer'）。向下滑动（350）；
$（#ThemeSecontainer'）。幻灯片（350）；
}否则{
$（'#addContainer'）。滑动切换（350）；
}
});
$（'#noteClick'）。单击（函数（）{
如果（$（“#设置容器、#添加容器、#标识容器、#主题容器”）是（“：可见”）{
$（“#设置容器”）。幻灯片（350）；
$（#addContainer'）。slideUp（350）；
$（'logoContainer'）。slideUp（350）；
$（“#noteContainer”）。向下滑动（350）；
$（#ThemeSecontainer'）。幻灯片（350）；
}否则{
$（“#noteContainer”）。滑动切换（350）；
}
});
$（'#logoClick'）。单击（函数（）{
如果（$（“#设置容器、#添加容器、#注释容器、#主题容器”）是（“：可见”）{
$（“#设置容器”）。幻灯片（350）；
$（#addContainer'）。slideUp（350）；
$（#notecainer'）。slideUp（350）；
$（“#logoContainer”）。向下滑动（350）；
$（#ThemeSecontainer'）。幻灯片（350）；
}否则{
$（“#logoContainer”）。滑动切换（350）；
}
});
$（“#主题单击”）。单击（函数（）{
如果（$（'settingsContainer，'addContainer，'noteContainer，'logoContainer'）。是（'visible'））{
$（“#设置容器”）。幻灯片（350）；
$（#addContainer'）。slideUp（350）；
$（#notecainer'）。slideUp（350）；
$（'logoContainer'）。slideUp（350）；
$（“#ThemeSecontainer”）。向下滑动（350）；
}否则{
$（#ThemeSecontainer'）。滑动切换（350）；
}
});

单击我

内容。。。



单击我

内容。。。



等等。。。等等。
您应该使用公共CSS类进行分组，即
标题
和
内容
。使用已建立的关系，您可以针对其他内容持有者以及与当前单击的标题元素关联的内容


$（'.container.header'）。在（'click'，function（）上{
//获取当前元素
var$this=$（this）；
//查找内容
var$content=$this.closest（'.container'）.find（'.content'）；//$this.next（）
//获取所有内容
var content=$（'.container.content'）；
//滑向其他人
content.not（$content）.slideUp（350）；
//滑落
$content.slideToggle（350）；
});
.content{
显示：无
}

点击我
内容。。。
点击我
内容。。。
点击我
内容。。。
您应该使用公共CSS类进行分组，即
标题
和
内容
。使用已建立的关系，您可以针对其他内容持有者以及与当前单击的标题元素关联的内容


$（'.container.header'）。在（'click'，function（）上{
//获取当前元素
var$this=$（this）；
//查找内容
var$content=$this.closest（'.container'）.find（'.content'）；//$this.next（）
//获取所有内容
var content=$（'.container.content'）；
//滑向其他人
content.not（$content）.slideUp（350）；
//滑落
$content.slideToggle（350）；
});
.content{
显示：无
}

点击我
内容。。。
点击我
内容。。。
点击我
内容。。。
最好的办法就是这样做


$（document）.on（'click'，.trigger'，function（）{
var sibling_content=$（this.sibling（.content））；
if（！sibling_content.hasClass（'active'））{
$（“.content”）.slideUp（'slow'）.removeClass（'active'）；
同级内容。slideDown（'slow'）。addClass（'active'）；
}否则{
同级内容.slideUp（'slow'）.removeClass（'active'）；
}
})
.trigger{
背景色：红色；
颜色：白色；
字体大小：16px；
}
.内容{
背景颜色：蓝色；
颜色：白色；
字体大小：16px；
填充：20px0；
显示：无；
}

触发
内容
触发
内容
触发
内容
触发
内容
最好的办法就是这样做


$（document）.on（'click'，.trigger'，function（）{
var sibling_content=$（this.sibling（.content））；
if（！sibling_content.hasClass（'active'））{
$（“.content”）.slideUp（'slow'）.removeClass（'active'）；
同级内容。slideDown（'slow'）。addClass（'active'）；
}否则{
同级内容.slideUp（'slow'）.removeClass（'active'）；
}
})
.trigger{
背景色：红色；
颜色：白色；
字体大小：16px；
}
.内容{
背景颜色：蓝色；
颜色：白色；
字体大小：16px；
填充：20px0；
显示：无；
}

触发
内容
触发
内容
触发
内容
触发
内容
Satpal，你赢了我。示例html现在已启动。是的，我有权访问html代码satpal，你比我快。示例html现在已启动。是的，我可以访问html代码。谢谢你，Satpal！令人惊叹的。谢谢你，萨