我的导航菜单有问题。我有一个这样的数组:
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();
}
这是我的作品:
最佳答案
您只能使用html & css 来制作多级菜单。
这是示例 fiddle :http://jsfiddle.net/uwuzbsrx/
关于javascript - 如何创建具有第 3 级的垂直导航菜单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29160328/