2

我有一个小提琴给你：http: //jsfiddle.net/vSs4f/

我想通过div.sub-menu简单的点击来显示a.haschildren。如果身体负载div.sub-menu应该关闭。a.haschildren如果我第二次点击div.sub-menu应该关闭。

我已经采样了很多东西，但我认为问题出在很多 DIV 上。一个想法是在小提琴中。

$(function()   {
    $("a.haschildren").click(function(e) {
        e.preventDefault();
        $('div.sub-menu:visible').hide();
        $(this).next('div.sub-menu').show();
    });
});

我真的希望你能帮助我，谢谢！

4

6 回答 6

2

尝试这个：-

小提琴

 $(function () {
    $("a.haschildren").click(function (e) {
        e.preventDefault();
        var subMenu = $(this).closest('div.haschildren').nextUntil('.sub-menu').next().toggle();
        $('div.sub-menu:visible').not(subMenu).hide();
      
    });
});

使用.nextUntil到达一个点直到.sub-menu，以防任何其他兄弟姐妹进入这仍然可以工作。

于 2013-05-15T05:01:15.760 回答
2

就我个人而言，我会改变很多关于你的 DOM 结构的事情。我坚信你的 javascript 结构应该基于结构良好的 DOM，因此遍历非常简单和直观。话虽如此，我会稍微大胆地提交我的小提琴，希望如果没有别的，你可以看看它并获得一些关于如何利用一些 DOM 怪癖来使你的 javascript 成为更直观和优雅。

http://jsfiddle.net/vSs4f/6/

$(function()   {
    $('#menu > div.item')
        .find('a').click(function() {
            var submenu_index = $(this).parents('.item:first').find('.sub-menu').toggle().index('.sub-menu');

            // This chunk can disappear if you're not interested in hiding all of the other sub-menus
            $('.sub-menu').filter(function(index) {
                if(index != submenu_index)
                    return true;
            }).hide();
        }).end()
        .find('div:first').after('<div class="trenner"></div>');
});
于 2013-05-15T05:21:15.640 回答
1

只需使用toggle()

$('div.sub-menu').toggle();
于 2013-05-15T04:55:44.487 回答
1

尝试

$(function()   {
    $("a.haschildren").click(function(e) {

        e.preventDefault();
        var item = $(this).closest('div.haschildren').next().next('div.sub-menu').toggle();
        $('div.sub-menu:visible').not(item).hide();
    });
});

演示：小提琴

于 2013-05-15T04:57:44.933 回答
1

具有讽刺意味的是，您正在寻找的方法是 .toggle();

http://api.jquery.com/toggle/

于 2013-05-15T04:59:34.017 回答
0

试试看：

$(function()   {
    $("div.haschildren").click(function() {
        if($(this).next().next('div.sub-menu').is(":hidden")){
            $('div.sub-menu:visible').hide();
            $(this).next().next('div.sub-menu').show();
        }else{
            $(this).next().next('div.sub-menu').hide();
        }
        return false;
    });
});
于 2013-05-15T05:42:02.313 回答