Javascript 整合jQuery菜单动画功能时出现问题

我正在制作一些动画效果，当单击菜单项时，会缩小页面上的某些div。这允许最终用户在主页的某些区域有更多的屏幕空间

我有这个功能，但我想巩固一下。下面是我的代码：

$('#wp-tabbed-widget-2').click(function () {
    $('.site-title').animate(
        {fontSize: "16px"},
        200);
    $('.title-area').animate(
        {width: "200px",
         paddingLeft: "10px"},
        400);
    $('.site-header').animate(
        {minHeight: "50px"},
        400);
    $('#header-logo').animate(
        {width: "40px",
         paddingLeft: "10px"},
         400);
});

我搞不清楚的是- 上面的代码只适用于一个菜单项，但我还想将其应用于另外3个菜单项（例如，#wp-tabbed-widget-2，…3，…4）。我不想复制/粘贴上面的代码，而只是更改属性以匹配新按钮，因为这看起来既懒惰又混乱

我知道我需要写一些条件来监控哪个按钮被点击来实现这一点，但我现在无法理解这一点。对我来说，写一些漂亮整洁的东西最好的方式是什么

$('#wp-tabbed-widget-2,#wp-tabbed-widget-3,#wp-tabbed-widget-4').click(function () {
    $('.site-title').animate(
        {fontSize: "16px"},
        200);
    $('.title-area').animate(
        {width: "200px",
         paddingLeft: "10px"},
        400);
    $('.site-header').animate(
        {minHeight: "50px"},
        400);
    $('#header-logo').animate(
        {width: "40px",
         paddingLeft: "10px"},
         400);
});

---

只需在ID之间加逗号即可显示html代码吗？如果您使用的是如上所述的多个div，请确保区分

标题logo

元素的ID，这样就不会有多个ID相同的logo。您不需要

this

或子选择器吗，是否只针对单击的小部件中的div？如果单击函数中引用的元素也特定于每个项目，则是，但根据类的问题和标题，情况似乎并非如此。