Question

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

问题1： jQuery代码始终使用类＆＃39;子菜单＆＃39;为每个 div设置动画。我尝试使用这样的东西只影响孩子

if ($(this, '.submenu')

或nth-child（2），儿童选择器或＆＃39; div＆＃39;，但似乎没有任何效果。 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甚至难以正确地google;）

Answer 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（）

jquery单击仅影响指定的子项

1 个答案: