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>