マウスオーバーでサブメニューを表示ぢたいのですが、親、子でなく、孫要素の当たるのでchildrenではslideDownができず。 .find()にすると「にんじん」以外もmouseoverするとサブナビが表示されてしまいます。 一つだけ取る方法ありますでしょうか？ <ul class="nav"> <li class="has-sub"> <a href="">野菜</a> <ul class="sub"> <li> <a href="">にんじん</a> <ul class="sub"> <li> <a href="">いちご</a> </li> <li> <a href="">りんご</a> </li> <li> <a href="">ぶどう</a> </li> </ul> </li> <li> <a href="">だいこん</a> </li> </ul> </li> </ul> Query $(function(){ $(".has-sub").mouseover(function(){ $(this).children(".sub").stop().slideDown(); }); $(".has-sub").mouseout(function(){ $(".sub").stop().slideUp(); }); }); JavaScript var parent = document.querySelectorAll(".has-sub"); var node = Array.prototype.slice.call(parent, 0); node.forEach(function (element) { element.addEventListener( "mouseover", function () { element.querySelector(".sub").classList.add("active"); }, false ); element.addEventListener( "mouseout", function () { element.querySelector(".sub").classList.remove("active"); }, false ); });