Question

我正在使用http://www.jankoatwarpspeed.com扩展行jQuery代码(Link to the creator's site)，除了我的表中有链接外，它的效果很好。单击表中的链接时，会展开该行。它确实转到链接，但它可能会给用户一个错误点击链接的印象，所以我宁愿让他们只点击箭头图像。这是代码：

<script type="text/javascript">  
            $(document).ready(function(){
                $("#blue_table_expand_small_spacing tr:odd").addClass("odd");
                $("#blue_table_expand_small_spacing tr:not(.odd)").hide();
                $("#blue_table_expand_small_spacing tr:first-child").show();

                $("#blue_table_expand_small_spacing tr.odd").click(function(){
                    $(this).next("tr").toggle();
                    $(this).find(".arrow").toggleClass("up");
                });
                //$("#blue_table_expand_small_spacing").jExpand();
            });
    </script>

这是表格html - 当然不完整。这个div里面有一个箭头图像，一个.png：

<td class="clicked_arrow"><div class="arrow"></div></td>

如果我将javascript更改为以下箭头，则会翻转，但下一行不再展开。

$("#blue_table_expand_small_spacing tr.odd td.clicked_arrow").click(function(){

非常感谢任何帮助！

Answer 1

这可能是因为当您将td.clicked_arrow添加到选择器时，您将在DOM中再向下一步。这意味着你对.next（“tr”）的调用什么都没找到，因为它不在同一级别上。首先需要返回到父TR，然后找到.next（“tr”）。

尝试更改：

$(this).next("tr").toggle();

为：

$(this).closest("tr").next("tr").toggle();

最近者找到与选择器匹配的最近父级。

jQuery .click - 如何检查div单击，图像单击或单击

1 个答案: