求助：点击多ID标题实现对应内容排他性显示/隐藏切换

嘿，我来帮你搞定这个问题！你现在的代码能实现点击标题显示对应内容，但缺少隐藏其他内容的逻辑，咱们来调整一下，完美实现你想要的效果：

第一步：设置初始隐藏状态（推荐） #

先给内容区块加上初始隐藏的CSS，避免页面加载时所有内容都默认显示：

.content {
    display: none;
}
.sub {
    display: none; /* 子内容也初始隐藏，更符合交互逻辑 */
}

第二步：修改jQuery逻辑 #

调整点击事件，每次点击标题时先隐藏所有其他内容，再显示当前对应的区块；子标题部分也做类似处理，避免同一父级下多个子内容同时展开：

$(document).ready(function(){
    // 主标题点击事件：仅显示对应内容，隐藏其他所有主内容
    $(".showcontent").click(function () {
        var targetContent = "#content" + $(this).attr('id');
        // 先隐藏所有主内容区块
        $(".content").fadeOut(500);
        // 再显示当前点击标题对应的内容
        $(targetContent).fadeIn(1000);
    });

    // 子标题点击事件：仅显示对应子内容，隐藏同一主内容下的其他子内容
    $(".content h3").click(function () {
        var targetSub = "#X" + $(this).attr('id');
        // 隐藏当前主内容下的所有其他子内容
        $(this).siblings(".sub").slideUp(300);
        // 显示当前点击子标题对应的内容
        $(targetSub).slideDown(500);
    });
});

代码逻辑说明 #

• 主标题部分：$(".content").fadeOut(500)会统一隐藏所有主内容区块，再通过fadeIn显示当前目标区块，确保同一时间只有一个主内容可见。
• 子标题部分：$(this).siblings(".sub")精准定位到当前点击标题的兄弟子内容，先隐藏它们再显示目标子内容，避免同一主内容下多个子内容同时展开的混乱。

可选优化：支持标题切换显示/隐藏 #

如果想要点击同一标题时，能切换该内容的显示/隐藏状态（同时保持其他内容隐藏），可以把主标题的逻辑改成这样：

$(".showcontent").click(function () {
    var targetContent = "#content" + $(this).attr('id');
    // 隐藏除当前目标外的所有主内容
    $(".content").not(targetContent).fadeOut(500);
    // 切换当前目标内容的显示/隐藏状态
    $(targetContent).fadeToggle(1000);
});

内容的提问来源于stack exchange，提问作者ChriChri