Question

我有一些具有相同内容结构的<li>元素，我希望只要点击p.plink触发<a>元素内的<li>点击，做不到。我想导航到网址，就像我点击了实际链接一样。

这是我试过的：

<ul>
    <li>
        <p class="plink" style="background:red;">click me</p>
        <a href="#0">link</a>
        <p>lorem ipsum bl bla</p>
    <li>

    <li>
        <p class="plink" style="background:red;">click me</p>
        <a href="#1">link</a>
        <p>lorem ipsum bl bla</p>
    <li>

    <li>
        <p class="plink" style="background:red;">click me</p>
        <a href="#2">link</a>
        <p>lorem ipsum bl bla</p>
    <li>
</ul>

$('li p.plink').click(function() {
    $(this).next('a').click();
});

Answer 1

这个怎么样

$('li p.plink').on('click', function() {
    $(this).closest('li').find('a').trigger('click');
});

Answer 2

你可以获得“href”的值，然后像这样重定向

$('li p.plink').click(function() {
    var href = $(this).next('a').attr('href');
    window.location = href;
});

Answer 3

您需要调用本机锚点击方法，例如：

$(this).closest('li').find('a').get(0).click();

导航到<a> when <p> is clicked inside </p><li></li></a>

3 个答案: