Question

我只想点击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();
    });
});

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

Answer 1

试试这个： -

Fiddle

 $(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之前的某个点，如果其他任何兄弟姐妹介入其中，这仍然有用。

Answer 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>');
});

Answer 3

只需使用toggle()

$('div.sub-menu').toggle();

Answer 4

尝试

$(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();
    });
});

演示：Fiddle

Answer 5

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

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

Answer 6

试一试：

$(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;
    });
});

使用JS切换/显示一个已定义的DIV

6 个答案:

Fiddle