jquery点击只影响指定的孩子答案

【问题标题】：jquery click only affect specified childjquery点击只影响指定的孩子
【发布时间】：2018-02-27 04:33:24
【问题描述】：

我尝试创建一个包含多个子菜单的菜单。我的想法是为每个高度为 0 像素和边框的子菜单使用 divs，因此它显示为一条线（仅在悬停时，模仿已知的“这是一个可点击的链接”）。如果按下它，它会使用 jQuery 的动画展开并显示子菜单。

问题 1： jQuery 代码总是用“子菜单”类为每个 div 设置动画。我试着用这样的东西只影响孩子

if ($(this, '.submenu')

或 nth-child(2)、子选择器或“div”，但似乎没有任何效果。 jsfiddle 解释了这个问题。

问题 2： 子菜单在按下子链接后折叠，但我不希望它这样做。 jQuery事件是不是只有点击父节点才会触发？

问题3：如果点击一个新的菜单点，应该会触发一个新的子菜单的动画，同时旧的应该折叠。

CSS

.nav {
    width: 200px;
    float: left;
    background-color: yellow;
    color: black;
}
.nav .submenu {
    border: 1px solid transparent;
    height: 0px;
    width: 100%;
    overflow: hidden;
}
.nav .active {
    color: red;
}
.nav .active + .submenu {
    border-color: black;
}
a:hover {
    color: blue !important;
}
a:hover + .submenu {
  border-color: black !important;
}

HTML

<div class="nav">
    <div class="menu">
        <a class="">Menu1</a>
        <div class="submenu">
            <li><a>Submenu1</a></li>
            <li><a>Submenu2</a></li>
        </div>
    </div>
    <div class="menu">
        <a class="">Menu2</a>
        <div class="submenu">
            <li><a>Submenu1</a></li>
        </div>
    </div>
</div>

Javascript

$(document).ready(function(){
    $('.nav .menu a').click(function(){
            $('a').removeClass("active");
            $(this).addClass("active");
    });
});

$(document).ready(function(){
    $('.nav .menu a').click(function () {
        if ($('.submenu').css('height') == '0px') {
            $('.submenu').animate({height:100}, 1000);
            $('.submenu').css("border-color","black");
        } else {
            $('a').removeClass("active");
            $('.submenu').animate({height:0}, 1000,function(){
                $('.submenu').css("border-color","transparent");    
            });
        }
    });
});

here's the jsfiddle

我们将不胜感激！我通过这个网站学到了很多东西，但是 JavaScript 甚至很难正确地谷歌；）

【问题讨论】：

这就是你想要的`？ jsfiddle.net/w4c6x6fh
你倒退了。 $(this, '.submenu') 应该是 $('.submenu', this) 或 $(this).find('.submenu')
请一次只问一个问题。

标签： jquery jquery-selectors jquery-animate

【解决方案1】：

类似

$('.menu a').on('click',function(){

    //Because of the ordering of your html, you should just use the .next() 
    //to 
    //get the surrounding div that holds  your submenu
    var subMenu = $(this).next();
    //Then go through the children of this list and show, hide, or do 
     //whatever you want to the elements
     $(submenu).childern().each(functon(){
             //style each div accordingly 

       });


 });

如果您只想显示菜单，则无需获取子项，只需单击标签中的 .next() 即可

【讨论】：