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>

这基本上只是扩展了从显示3 li到10 ...

的ul

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

所以我想要实现的是当用户点击带有类的链接=＆＃34; show-hide＆＃34; ＆GT;然后忽略将用户发送到整行的链接的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/

Answer 2

使用 event.stopPropagation（），它会限制父事件的调用。请参阅链接：When use event.stopPropogation

    $(".show-hide").click(function (event) {            
        event.stopPropagation();
        // your logic here
    });

Answer 3

将事件绑定到li，但课程.show-hide除外：

$('.clickable-row li:not(.show-hide)').click(function () {
    window.document.location = $(this).closest('.clickable-row').data("href");
});

整个表行可单击，除非单击带有.class的td中的元素

3 个答案: