jquery - 整个表格行均可单击，除非单击带有 .class 的 td 内的元素

Question

我已将表格中的整行设置为可单击。在某些列中，当您单击某些数据的链接时，会显示/隐藏功能，例如

<td>
    <ul>
    <li>List item 1</li>
    <li>List item 2</li>
...etc. etc...
    <li class="show-hide"><a href="#" class="show-hide">Show more</a></li>
    </ul>
</td>

这基本上只是将 ul 从显示 3 里扩展到 10...

但是因为整个表格行都是可点击的，所以当我点击“显示更多”时，它会转到该行的链接...并忽略显示/隐藏的功能。

所以我想要实现的是，当用户单击带有 class="show-hide"> 的链接时，忽略将用户发送到整行链接的 jQuery...

jQuery 使行可点击

$(document).ready(function($) {
    $(".clickable-row").click(function() {
        window.document.location = $(this).data("href");
    });
});

Answer 1

捕获事件并读取其属性。通过这种方式，您可以识别您现在点击的内容。

$(document).ready(function($) {
    $(".clickable-row").click(function(event) {
        if(!$(event.target).hasClass('show-hide')) {
           window.document.location = $(this).data("href");
        }
    });
});

查看它的工作情况:

https://jsfiddle.net/19ywsnh9/