Question

我有这个jQuery脚本，它从json树输出一个HTML菜单。

$(function () {

    var data = {
        menu: [{
            name: 'Croatia',
            link: '0',
            sub: null
        }, {
            name: 'England',
            link: '1',
            sub: [{
                name: 'Arsenal',
                link: '0-0',
                sub: null
            }, {
                name: 'Liverpool',
                link: '0-1',
                sub: null
            }, {
                name: 'Manchester United',
                link: '0-2',
                sub: null
            }]
        }, {
            name: 'Spain',
            link: '2',
            sub: [{
                name: 'Barcelona',
                link: '2-0',
                sub: null
            }, {
                name: 'Real Madrid',
                link: '2-1',
                sub: null
            }]
        }, {
            name: 'Germany',
            link: '3',
            sub: [{
                name: 'Bayern Munich',
                link: '3-1',
                sub: null
            }, {
                name: 'Borrusia Dortmund',
                link: '3-2',
                sub: null
            }]
        }]
    };
    var getMenuItem = function (itemData) {
        var item = $("<li>")
            .append(
        $("<a>", {
            href: '#' + itemData.link,
            html: itemData.name
        }));
        if (itemData.sub) {
            var subList = $("<ul>");
            $.each(itemData.sub, function () {
                subList.append(getMenuItem(this));
            });
            item.append(subList);
        }
        return item;
    };

    var $menu = $("#menu");
    $.each(data.menu, function () {
        $menu.append(
            getMenuItem(this)
        );
    });
    $menu.menu();
});

和HTML：

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<ul id="menu"></ul>

这就完成了工作，它输出了HTML菜单，但我希望隐藏子菜单，直到访问者点击它为止。

为了清除它，我们以此菜单为例：

Primary Menu 1
    - Submenu item 1
    - Submenu item 1

Primary Menu 2
    - Submenu item 2
    - Submenu item 2

访问者点击“主菜单1”后，它应隐藏所有主菜单，并仅显示子菜单项。

我怎样才能达到这个结果？

更新;设法让它正常工作（现在json也加载到另一个文件中。）

$(window).load(function(){
    $(function () {
        var getMenuItem = function (itemData) {
            var item = $("<li>")
                .append(
            $("<a>", {
                href: '#' + itemData.link,
                html: itemData.name
            }));
            if (itemData.sub) {
                var subList = $('<ul>', {'class':'sub-menu'});
                $.each(itemData.sub, function () {
                    subList.append(getMenuItem(this));
                });
                item.append(subList);
            }
            return item;
        };

        var $menu = $("#menu");
        $.each(data.menu, function () {
            $menu.append(
                getMenuItem(this)
            );
        });

        $(".sub-menu").hide();

        $("li").click(function (e) {
            e.stopPropagation();
            $(this).children('ul').slideToggle();
        });
    });
});

Answer 1

在完成所有菜单创建代码之后，您可以首先向具有子菜单的所有菜单项添加一个类。您可以在创建代码中执行此操作。

var subList = $('<ul>', {'class':'sub-menu'});

从那里你应该能够知道哪些菜单项有子菜单，你可以从那里做各种各样的事情。

一个示例可能是在{c}中为sub-menu提供0的默认高度。然后将点击事件添加到<ul class="sub-menu">父级<li>以设置菜单高度动画，同时向<li>添加一个类，以便知道它何时打开或关闭。

$('.sub-menu').parent().on('click', function(){
   $(this).toggleClass('active');
   if ($(this).hasClass('active')){
     $(this).children('.sub-menu').animate({'height':'auto');
   } else {
     $(this).children('.sub-menu').animate({'height':'0');
   }
});

您甚至可以更进一步，对所有包含子菜单的菜单项进行检查，以确保先前打开的菜单项在新菜单项打开之前是否已关闭。

//Inside the previous click handler as the 1st thing in it.
$(this).siblings().removeClass('active');

如果该代码适用于您的情况（取决于现有样式），则不是100％，但它应该为您提供您想要实现的想法。

jQuery - 单击子菜单后隐藏主要ul

1 个答案: