javascript - 如何将子链接绑定(bind)到其父容器

Question

我有一些 html，在移动设备上链接太小，无法单击文本链接，因此我想让整个父容器仅在移动设备上可单击。如何将子 anchor 与“仅显示小类链接”绑定(bind)到父 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");
});