親コンテナに子リンクをバインドする方法

Question

モバイルでは、リンクがテキストリンクをクリックするには小さすぎるため、モバイル上で親コンテナ全体をクリック可能にしたいと考えています。どのように私は、親の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; 
});