jQuery:动画一级li

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/

所以我希望只有在点击 "Basics"、"Effekte"、"HTML"、"Traversing" 时菜单才会 slideUp/Down。

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

希望对你有所帮助:)

Answer 1

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

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

这是更新后的 fiddle。

https://jsfiddle.net/rzkw9ce2/

有关 JS 事件传播的更多信息，请阅读 Arun 对此的出色回答post：

What is event bubbling and capturing?

Answer 2

我已经为您更新了fiddle

fiddle

如果您对要触发点击的 li 个元素使用 class，会更简单、更清晰。

例如：

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

如果您只想为具有 .accordion class 的元素创建点击事件，请检查当前点击的元素是否来自点击事件目标

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:动画一级li

jQuery: Animate first-level li

html

jquery

select

menu

list