Jqueryイベントのタッチ伝播親子（リンク）

Question

jquery touchイベントに問題があります。私は私のiPhoneを使用し、Menu1をクリックすると、私のWebページ "link1"が表示されます。

私はこれを望んでいます。私はMenu1をクリック（タッチ）するとlink1とlink2を表示します。それから私はlink1かlink2のどちらかを選ぶことができます。

デフォルトでは、リンク1と2は私のCSSには表示されません。

$('body').on('touchstart', '#b', function() { 
 
    $('#b').hide(); 
 
    $('#c').show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="a"> 
 
    <li id="b"> 
 
    <a> <strong>Menu 1 </strong> </a> 
 
    </li> 
 
    <li id="c"> 
 
    <a href="vv.com"> <strong> Link 1 </strong> </a> 
 
    </li> 
 
    <li id="c"> 
 
    <a href="vv.com"> <strong> Link 2 </strong> </a> 
 
    </li> 
 
</ul>

Answer 1

ターゲット:first LI、あなたはjQueryの.nextAll()

_{を使用することができますよりも（私は単純化のためにIDを削除）}

$('body').on('touchstart', 'li:first', function(){ 
 
$(this).nextAll().stop().slideToggle(); 
 
});

ul li + li{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul> 
 
    <li> 
 
    <a><b>Menu 1</b></a> 
 
    </li> 
 
    <li> 
 
    <a href="vv.com"><b>Link 1</b></a> 
 
    </li> 
 
    <li> 
 
    <a href="vv.com"><b>Link 2</b></a> 
 
    </li> 
 
</ul>

しかし、あなたは効果は恐ろしいです見ることができるように - すべてのLIはそのため、通常は、それ自身でアニメーション化し、我々はこのタスクは、ネストされたリストを使用しているのアプローチ方法：

$(document).on('touchstart', 'li', function(e) { 
 
    e.stopPropagation(); // If you need more nested lists don't propagate the click 
 
    $(this).find("> ul").stop().slideToggle(); 
 
});

li > ul { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul> 
 
    <li> 
 
    <b>Menu 1</b> <!-- Why use <a> if it's not an anchor... --> 
 
    <ul>   <!-- Nested list! Yey --> 
 
     <li> 
 
     <a href="http://vv.com"><b>Link 1</b></a> 
 
     </li> 
 
     <li> 
 
     <a href="http://vv.com"><b>Link 2</b></a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>