如何在MVC中使用jQuery为表格多行实现Bootstrap Glyphicon切换效果？

我来帮你搞定这个单选切换的图标需求～你的核心要求是：点击某一行按钮时，切换该行的Glyphicon样式，同时把其他所有行的图标恢复成初始的向右箭头状态，保证同一时间只有一行是展开样式。

修改后的jQuery代码 #

$('#Partial').on('click', '.lCls', function () {
    // 1. 先重置所有行的图标为初始的向右箭头
    $('.lCls span').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-right');
    // 2. 再切换当前点击行的图标样式
    $(this).children('span').toggleClass("glyphicon-chevron-right glyphicon-chevron-down");
});

代码逻辑解释 #

• 第一步先选中所有带.lCls类的按钮下的span元素，移除向下箭头的样式类，强制添加上向右箭头的类，这样就能把其他所有行的图标都恢复到初始状态。
• 第二步单独处理当前点击的按钮，切换它的图标类，确保只有当前行是展开（向下箭头）状态，其他行都是收起（向右箭头）状态。

可选优化：同步控制折叠面板单选 #

如果希望点击新行时，其他行的折叠面板也自动收起，可以在代码里补充一行控制折叠状态的逻辑（你的原<tr>已经有Bootstrap原生的折叠触发属性，这步是额外的严谨控制）：

$('#Partial').on('click', '.lCls', function () {
    // 重置所有图标
    $('.lCls span').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-right');
    // 收起所有其他折叠面板
    $('.accordian-body.collapse').collapse('hide');
    // 切换当前行的图标
    $(this).children('span').toggleClass("glyphicon-chevron-right glyphicon-chevron-down");
});

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