javascript - 如何仅在菜单中对父项使用 PreventDefault() ？

Question

我正在构建一个带有基于触摸的下拉菜单的菜单，一切都工作得很好，除了当一个人单击父级时，我希望它只激活下拉菜单，而不是转到父级 href 中列出的链接。因此，我尝试使用 PreventDefault() 但它也禁用了下拉列表中所有子项的链接。我只希望它禁用父级的链接并允许子级的链接正常工作。我如何使用它来仅定位父链接。这是我的代码:

菜单

<ul class="nav menu">
 <li class="parent"><a href="#">Parent</a>
  <ul class="nav-child">
    <li><a href="#" >Child 1</a></li>
    <li><a href="#" >Child 2</a></li>
    <li><a href="#" >Child 3</a></li>
  </ul>
 </li>
</ul>

jquery

var $dropDownLinks = $('.parent a');

$dropDownLinks.click( function(event){
   event.preventDefault();
});

Answer 1

你能做的就是限制你的元素选择器:

尝试仅选择 .parent 的直接子元素。

这可以通过“>”来完成，示例

var $dropDownLinks = $('.parent > a');

$dropDownLinks.click( function(event){
   event.preventDefault();
});