Javascript 类中断事件

我有一个简单的下拉菜单。单击

。下拉列表

，子菜单将向下滑动。但是，如果单击

。下拉列表的任何子项，它将再次向上滑动。我只需要单击以滑动菜单的
。下拉列表
，而不需要其子菜单

这就是它的作用：

专门针对
a

$( ".drop-down>a" ).click(function() {
  $('.sub-menu').slideToggle();
});

$('.drop-down').fadeTo('slow', 0.3);

或者，只需将类从
li
移动到
a

<ul>
    <li>
        <a href="#" class="drop-down"> Main </a> 
        <ul class="sub-menu">
        <li><a href="#">Sub</a> </li>
        <li><a href="#">Sub</a> </li>
        <li><a href="#">Sub</a> </li>
    </ul></li>
    <li><a href="#">Main</a> </li>
    <li><a href="#">Main</a> </li>
    <li><a href="#">Main</a> </li>
    <li><a href="#">Main</a> </li>
</ul>

我很乐意，不过这是WordPress默认导航的简化过程。我对我能申请的课程和地点有点限制（@tmyie还可以查看我的其他编辑。如果您打算使用多个下拉列表。谢谢。为什么针对
a
专门解决了这个问题？@tmyie因为您将单击事件处理程序绑定到
。下拉列表
-所以您在该元素中单击的任何位置都将触发事件-这都是子元素元素位于
下拉列表中。
元素。当您变得更具体并仅绑定锚定时，仅在锚定内单击将触发事件
$( ".drop-down>a" ).click(function() {
  $('.sub-menu').slideToggle();
});

$('.drop-down').fadeTo('slow', 0.3);

<ul>
    <li>
        <a href="#" class="drop-down"> Main </a> 
        <ul class="sub-menu">
        <li><a href="#">Sub</a> </li>
        <li><a href="#">Sub</a> </li>
        <li><a href="#">Sub</a> </li>
    </ul></li>
    <li><a href="#">Main</a> </li>
    <li><a href="#">Main</a> </li>
    <li><a href="#">Main</a> </li>
    <li><a href="#">Main</a> </li>
</ul>

   $( ".drop-down>a" ).on("click", function() {
      $(this).siblings('.sub-menu').slideToggle();
    });

    $('.drop-down').fadeTo('slow', 0.3);