Kendo TabStrip for MVC 标签内容无法正常隐藏问题求助

问题背景 #

使用Telerik Kendo TabStrip的代码如下：

@(Html.Kendo().TabStrip().Name("FilterTabs")
            .Animation(a =>
            {
                a.Enable(true);
                a.Open(c =>
                {
                    c.Expand(ExpandDirection.Vertical);
                    c.Fade(FadeDirection.In);
                    c.Duration(400);
                });
                a.Close(c =>
                {
                    c.Reverse(true);
                });
            })

            .Items(t => t.Add().Text("Simple Filter").Selected(true)
            .ContentHtmlAttributes(new { @class = "edit-pool-tab", @style = "min-height: 100px;" })
            .Content(@<partial name="_FilterSimple" for="@Model" />))
            .Items(t => t.Add().Text("Extended Filter")
            .ContentHtmlAttributes(new { @class = "edit-pool-tab", @style = "min-height: 100px;" })
            .Content(@<partial name="_FilterExtended" for="@Model" />))
            )

异常表现 #

• 页面加载时，"Simple Filter"标签内容正常显示，但两个标签头部均无选中样式
• 点击"Extended Filter"标签后，该标签头部变为选中状态，但两个标签的内容同时显示
• 只有先点击"Simple Filter"再点击"Extended Filter"，才能恢复正常切换逻辑（未选中标签内容会隐藏），后续切换正常；移除动画配置后问题仍存在

原因分析 #

问题根源在于重复调用.Items()方法。Kendo TabStrip的.Items()方法用于批量配置标签项，多次调用会打乱组件内部的DOM初始化逻辑：第一次调用添加选中标签时，组件未正确将选中状态绑定到标签头部；第二次调用添加第二个标签时，进一步破坏了初始状态管理，最终导致头部样式与内容显示不同步。

修复方案 #

将所有标签项的配置合并到同一个.Items()调用中，让组件一次性完成所有标签的初始化，确保选中状态和内容切换逻辑正常工作：

@(Html.Kendo().TabStrip().Name("FilterTabs")
            .Animation(a =>
            {
                a.Enable(true);
                a.Open(c =>
                {
                    c.Expand(ExpandDirection.Vertical);
                    c.Fade(FadeDirection.In);
                    c.Duration(400);
                });
                a.Close(c =>
                {
                    c.Reverse(true);
                });
            })
            // 合并所有标签项到同一个Items方法中
            .Items(t => 
            {
                t.Add().Text("Simple Filter")
                  .Selected(true)
                  .ContentHtmlAttributes(new { @class = "edit-pool-tab", @style = "min-height: 100px;" })
                  .Content(@<partial name="_FilterSimple" for="@Model" />);

                t.Add().Text("Extended Filter")
                  .ContentHtmlAttributes(new { @class = "edit-pool-tab", @style = "min-height: 100px;" })
                  .Content(@<partial name="_FilterExtended" for="@Model" />);
            })
)

补充说明 #

• 合并.Items()调用后，组件会正确识别Selected(true)标记的标签，页面加载时自动给对应标签头部添加选中样式
• 组件的内容切换逻辑也会恢复正常，点击标签时会自动隐藏未选中标签的内容，无需额外操作

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