jquery事件触摸传播父母给孩子（链接）

Question

我有一个jQuery触摸事件的问题。当我使用我的iphone和我点击Menu1时，它显示我的网页“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李比你可以使用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>

但你可以看到效果是可怕的 - 每李动画在它自己的，因此，通常情况下，我们如何处理这个任务是使用嵌套列表：

$(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>