类后代扰乱事件

Class descendants disrupting events

本文关键字：事件 后代      更新时间：2023-09-26

我有一个简单的下拉菜单。单击.drop-down 时，子菜单将向下滑动。但是，如果单击 .drop-down 的任何子项，它将再次向上滑动。我只想要单击以滑动菜单的.drop-down，而不是它的后代。

这是在行动：http://jsfiddle.net/tmyie/uXn5k/2/

<ul>
    <li class="drop-down">
        <a href="#"> 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>

jQuery

$( ".drop-down" ).click(function() {
  $('.sub-menu').slideToggle();
});
$('.drop-down').fadeTo('slow', 0.3);

http://jsfiddle.net/tmyie/uXn5k/2/

专门针对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>

编辑：

顺便说一下，使用此脚本会遇到多个下拉列表的麻烦。请考虑进行以下更改：

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

http://jsfiddle.net/uXn5k/6/

相关文章：