jQuery – jExpand 插件 – 通过图像扩展？答案

【问题标题】：jQuery – jExpand plugin - expand via image?jQuery – jExpand 插件 – 通过图像扩展？
【发布时间】：2017-10-26 21:21:29
【问题描述】：

我在看：使用 jQuery 扩展表格行 - jExpand 插件。

http://www.jankoatwarpspeed.com/expand-table-rows-with-jquery-jexpand-plugin/

这是我想要的，但我只希望通过箭头图标切换行，而不是通过单击整行。

我尝试更改 $("#report tr.odd").click(function(){ 以获取箭头类，但没有任何效果。

谁能指出我正确的方向！

【问题讨论】：

能否请您发布包含您尝试的JSFiddle？

标签： javascript jquery html html-table toggle

【解决方案1】：

您需要进行两项更改

css 更改：

#report tr.odd td { background:#fff url(row_bkg.png) repeat-x scroll center left; }
.arrow { cursor:pointer;}

JavaScript 更改：

$(".arrow").click(function(){
  $(this).parents("tr").next("tr").toggle();
  $(this).toggleClass("up");
});

http://jsfiddle.net/566aT/3/

【讨论】：

【解决方案2】：

您必须更改单击以绑定到箭头，然后确保返回到 TR 上下文。这是fiddle

$("#report tr.odd .arrow").click(function(){
                $(this).closest('tr').next("tr").toggle();
                $(this).closest('tr').find(".arrow").toggleClass("up");
            });
            //$("#report").jExpand();
        });

【讨论】：