jq点击改变元素样式、添加类，显示隐藏，图标旋转，再次点击还原；表格点击显示下拉详情

点击前

点击后

 

 

 

<tr>

　　<td class="right" data-id="{$vo.id}" id="{$vo.id}" > <div class="right_i"  id="z{$vo.id}"><i   class="layui-icon layui-icon-right" style="margin-right: -1px;"></i></div></td>//点击的元素

</tr>

<tr class=" detail_show detail" id="y{$vo.id}" >//需要显示隐藏的自定义内容

    <td colspan="10" class="detail_box" >
    <div class="down">
      
    </div>
    </td>
</tr>

其中：
.right为点击元素的class名
modelId为当前点击元素的data-id的值加上自定义的前缀#y

Iid为当前点击元素的id的值加上自定义的前缀#z
gg为id值为modelId的元素的class值，是一个由多个类名组成的字符串,比如class=“detail_show detail”，那么gg的值就是detail_show detail

gg.indexOf("detail_show")指查找gg里面是否包含字符串detail_show，包含返回大于等于0的整数值，不包含返回-1；

$('body').on('click',".right", function (data) {

    var modelId='#y'+$(this).attr("data-id");
    var Iid='#z'+$(this).attr("id");
    var gg=$(modelId).attr("class");
    if(gg.indexOf("detail_show")>=0){
        $(Iid).addClass('kk');
        $(modelId).removeClass("detail_show");
        $(modelId).show();

    }else {
        $(Iid).removeClass('kk');
        $(modelId).addClass('detail_show');
        $(modelId).hide();
    }


});