Question

我试图仅为此（此处缩短）菜单中的第一级li设置动画：

<div class="test">
    <ul id='nav'>
        <li>Start</li>
        <li>Basics
            <ul>
                <li class="level_2">Installation</li>
                <li><a href="#">Syntax</a></li>
                <li>Selektoren</li>
                <li>Events und Ereignisse</li>
                <li>Zusammenfassung</li>
            </ul>
        </li>
    </ul>
</div>

这是一个jsfiddle：https://jsfiddle.net/kfc79z6h/4/

所以我希望菜单只有在点击“基础知识”，“效果”，“HTML”，“遍历”时才能上下滑动。

正如你在小提琴中看到的那样，我已经尝试了很多我到目前为止找到的答案，但似乎没有任何效果。

我希望你能帮忙:)。

Answer 1

由于JS事件在DOM中向上冒泡，因此即使实际点击发生在子<li>上，点击事件最终也会触发父事件。仅接受对实际元素的直接点击的最简单方法是检查event.target是什么元素，如下：

$("#nav > li").on( "click" , function(event){
  if (event.target !== this) { return; }
  // ...
}

这是一个更新的小提琴。

https://jsfiddle.net/rzkw9ce2/

有关JS事件传播的更多信息，请阅读Arun对这篇文章的出色答案：

What is event bubbling and capturing?

Answer 2

我已经为你更新了小提琴

fiddle

如果您使用class li元素来触发点击，则会更简单，更清晰。

例如：

$('.accordion').click(function(){
 // something
})

如果您希望点击事件仅针对.accordion类的元素，请检查当前点击的元素是否来自点击事件目标

if(e.target !== this)  return;

Answer 3

JavaScript事件通过文档对象模型（DOM）向上移动。当您单击子项时，即使您单击<li>，单击事件也会向上移动到父项。要获得直接点击，请使用event.target

检查点击了哪个项目

$("#nav > li").on("click", function(event) {
   if (event.target !== this) { return; }
   //blah blah here
}

jQuery：Animate第一级li

3 个答案: