javascript - 如何创建具有第 3 级的垂直导航菜单？

Question

我的导航菜单有问题。我有一个这样的数组:

Array
(
    [0] => Array
        (
            [category_id] => 67
            [name] => Mobiles & Tablets
            [href] => http://localhost/ecommerce/index.php?route=product/category&path=67
            [sub_category] => Array
                (
                    [0] => Array
                        (
                            [category_id] => 80
                            [name] => Mobiles
                            [href] => http://localhost/ecommerce/index.php?route=product/category&path=67_80
                            [sub_category] => Array
                                (
                                    [0] => Array
                                        (
                                            [category_id] => 82
                                            [name] => Smartphones
                                            [href] => http://localhost/ecommerce/index.php?route=product/category&path=67_80_82
                                        )

                                    [1] => Array
                                        (
                                            [category_id] => 83
                                            [name] => Basic Phones
                                            [href] => http://localhost/ecommerce/index.php?route=product/category&path=67_80_83
                                        )

                                    [2] => Array
                                        (
                                            [category_id] => 84
                                            [name] => Mobile Accessories
                                            [href] => http://localhost/ecommerce/index.php?route=product/category&path=67_80_84
                                        )

                                    [3] => Array
                                        (
                                            [category_id] => 85
                                            [name] => Power Banks
                                            [href] => http://localhost/ecommerce/index.php?route=product/category&path=67_80_85
                                        )

                                    [4] => Array
                                        (
                                            [category_id] => 86
                                            [name] => Mobile Broadband
                                            [href] => http://localhost/ecommerce/index.php?route=product/category&path=67_80_86
                                        )

                                )

                        )

                    [1] => Array
                        (
                            [category_id] => 81
                            [name] => Tablets
                            [href] => http://localhost/ecommerce/index.php?route=product/category&path=67_81
                            [sub_category] => Array
                                (
                                    [0] => Array
                                        (
                                            [category_id] => 87
                                            [name] => Tablets with Call Facility
                                            [href] => http://localhost/ecommerce/index.php?route=product/category&path=67_81_87
                                        )

                                    [1] => Array
                                        (
                                            [category_id] => 88
                                            [name] => Tablets without Call Facility
                                            [href] => http://localhost/ecommerce/index.php?route=product/category&path=67_81_88
                                        )

                                    [2] => Array
                                        (
                                            [category_id] => 89
                                            [name] => Tablet Accessories
                                            [href] => http://localhost/ecommerce/index.php?route=product/category&path=67_81_89
                                        )

                                )

                        )

                )

        )

我想创建一个具有第三级的导航菜单。在我的代码中我有这个:

<div class="index_categories_section">
    <h4>CATEGORY</h4>
    <nav>
        <ul class="list-unstyled">

        <?php if($main_category) { ?>

            <?php foreach($main_category as $keys => $values) { ?>

                <li class="cat_list" onmouseover="displayOptions(<?php echo $keys; ?>);" onmouseout="hideOptions(<?php echo $keys; ?>);">
                    <a href="<?php echo $values['href']; ?>"><?php echo $values['name']; ?></a>

                    <?php if(!empty($values['sub_category'])) { ?>

                        <span class="pull-right"><i class="fa fa-chevron-right"></i></span>

                        <div id="choice-<?php echo $keys; ?>" class="choices">

                            <?php foreach($values['sub_category'] as $scd_lvl_keys => $scd_lvl_values) { ?>

                                <a href="<?php echo $scd_lvl_values['href']; ?>" onmouseover="subDisplayOptions(<?php echo $scd_lvl_keys; ?>);" onmouseout="hideOptions(<?php echo $scd_lvl_keys; ?>);">

                                    <div class="list_links">

                                        <?php echo $scd_lvl_values['name']; ?>

                                        <?php if(!empty($scd_lvl_values['sub_category'])) { ?>

                                            <span class="pull-right"><i class="fa fa-chevron-right"></i></span>

                                            <div id="sub-choice-<?php echo $scd_lvl_keys; ?>" class="sub_choices" onmouseout="subHideOptions(<?php echo $scd_lvl_keys; ?>);">

                                                <?php foreach($scd_lvl_values['sub_category'] as $thrd_lvl_keys => $thrd_lvl_values) { ?>
                                                    <a href="<?php echo $thrd_lvl_values['href']; ?>"><?php echo $thrd_lvl_values['name']; ?></a>
                                                <?php } ?>

                                            </div>

                                        <?php } ?>

                                    </div>

                                </a>

                            <?php } ?>

                        </div>

                    <?php } ?>
                </li>

            <?php } ?>
        <?php } else { ?>
            <p class="text-center required">No Category Set</p>
        <?php } ?>


        </ul>
    </nav>
    <div class="row">
        <div class="col-xs-12" id="more-categories">
            <a href="<?php echo $category_list; ?>" class="pull-right">View Category list  <i class="fa fa-play"></i></a>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

如果显示数组的第二层我没有问题但是显示第三层我有错误。每当我将鼠标悬停到第三级并转到其他链接时。它不显示类别。

这是我显示和隐藏类别的函数:

function displayOptions(id) {
    $("#choice-" + id).show();
}

function hideOptions(id) {
    $("#choice-" + id).hide();
}

function subDisplayOptions(id) {
    $("#sub-choice-" + id).show();
}

function subHideOptions(id) {
    $("#sub-choice-" + id).hide();
}

这是我的作品:

http://jsfiddle.net/rochellecanale/pctgp9on/4/

Answer 1

您只能使用html & css 来制作多级菜单。这是示例 fiddle :http://jsfiddle.net/uwuzbsrx/