Question

我正在尝试制作移动菜单。计划是当您单击子菜单显示的菜单项时，其他菜单项消失，仅显示子菜单。

到目前为止我的代码：

HTML

<div class="mobile">
    <div class="back"></div>
    <nav class="clearfix">  <a href="index.html" class="logo"></a>

        <button class="trigger">Menu</button>
        <ul class="menu clearfix">
            <li><a href="index.html">Home</a>
            </li>
            <li><a>Media</a>
            </li>
            <li><a href="evenementen.html">Evenementen</a>
            </li>
            <li class="has-sub">    <a>Groepen</a>

                <ul class="sub">
                    <li class="terug"><a>&#60; Ga terug</a>
                    </li>
                    <li><a href="groepen/piepers.html">piepers</a>
                    </li>
                    <li><a href="groepen/grovers.html">grovers</a>
                    </li>
                    <li><a href="groepen/joros.html">joro's</a>
                    </li>
                    <li><a href="groepen/knim.html">knim</a>
                    </li>
                    <li><a href="groepen/sjo.html">sjo</a>
                    </li>
                    <li><a href="groepen/+16.html">+16</a>
                    </li>
                    <li><a href="groepen/+18.html">+18</a>
                    </li>
                </ul>
            </li>
            <li><a href="over-ons.html">Over ons</a>
            </li>
            <li><a href="contact.html">Contact</a>
            </li>
        </ul>
    </nav>
</div>

的jQuery

$(".mobile .trigger").click(function () {
    if ($(this).hasClass("clicked")) {
        $(this).removeClass("clicked");
        $(".mobile .menu").stop(true, false).fadeOut(250);
    } else {
        $(this).addClass("clicked");
        $(".mobile .menu").stop(true, false).fadeIn(250);
    }
});
$(".mobile .has-sub a").click(function () {
    if ($(this).parent().hasClass("clicked")) {
        $(this).parent().removeClass("clicked");
        $(this).next().stop(true, false).fadeOut(250);
    } else {
        $(this).parent().addClass("clicked");
        $(this).next().stop(true, false).fadeIn(250);
    }
});
$(".mobile .terug a").click(function () {
    $(this).parent().parent().stop(true, false).fadeOut(250);
    $(this).parent().parent().parent().removeClass("clicked");
});

http://jsfiddle.net/Rings/03yhnmc9/

Answer 1

这是第一次尝试做你想做的事情，你可以隐藏/显示带有一些动画的菜单项。

的jQuery

$(".mobile .has-sub a").click(function()
{
    if ($(this).parent().hasClass("clicked"))
    {
        $(this).parent().removeClass("clicked");
        $(this).parent().parent().children().removeClass("hide");
        $(this).next().stop(true, false).fadeOut(250);
    }
    else
    {
        $(this).parent().addClass("clicked");
        $(this).parent().parent().children().addClass("hide");
        $(this).parent().removeClass("hide");
        $(this).next().stop(true, false).fadeIn(250);
    }
});

然后你需要在CSS中添加.hide的样式，例如：

.hide { display: none; }

从这里开始，我想你可以继续。希望它有所帮助。

Answer 2

我已找到它：http://jsfiddle.net/Rings/03yhnmc9/1/

更新了jQuery：

$(".mobile .trigger").click(function()
    {
        $(".mobile .menu").toggle();
        $(this).toggleClass("clicked");
    });
    $(".mobile .has-sub > a").click(function()
    {
        $(this).next().show();
        $(this).parent().toggleClass("clicked");
        $(".mobile .menu li").not($(this).parent()).hide();
        $(this).next().children().show();
        $(this).hide();
    });
    $(".mobile .terug a").click(function()
    {
        $(this).parent().parent().hide();
        $(this).parent().parent().parent().parent().find('> li').show();
        $(this).parent().parent().parent().removeClass("clicked");
        $(this).parent().parent().parent().find('> a').show();
    });

仅显示子菜单

2 个答案: