Question

我有一些html，在移动设备上链接太小，无法单击文本链接，所以我想让整个父容器只能在移动设备上点击。如何将子锚点与＆＃34; show-for-only-only类链接绑定到父div？

    @media #{$small-only} {
        .show-for-small-only {
             display: block;
        }

       .hide-for-small-only {
             display: none;
        }
   .parent {
       cursor: pointer;
         }
    }


    <div class=“parent”>
        <p>Some Text</p>
        <a href=“myLink1” class="show-for-small-only">My link</a>
        <a href=“myLink1" class="hide-for-small-only”>My Normal link</a>
    </div>

    <div class=“parent”>
        <p>Some Text</p>
        <a href=“myLink2” class="show-for-small-only">My link2</a>
        <a href=“myLink2" class="hide-for-small-only”>My Normal link 2</a>
    </div>

    <div class=“parent”>
        <p>Some Text</p>
        <a href=“myLink3” class="show-for-small-only">My link3</a>
        <a href=“myLink3" class="hide-for-small-only”>My Normal link 3</a>
    </div>

Answer 1

你可以做这样的事情 - 可以通过多种不同方式简化或编写：

$(".parent").bind("click", function(){
    window.location.href = $(".parent a").attr("href");
});

Answer 2

$(".parent show-for-small-only").click(function(){
    var link=$(this).find("a").attr("href");
    window.location.href = link;
});

如何将子链接绑定到它的父容器

2 个答案: