我在三级code in jsfiddle创建菜单。但它不起作用。我想设计它像digikala.com。但我有问题。第三级菜单没有显示。请帮我。抱歉，我是html的新手
<div class="navbar navbar-default yamm">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar-collapse-grid"
class="navbar-toggle">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
</span>
</button>
<a href="#" class="navbar-brand">buy100</a>
</div>
<div id="navbar-collapse-grid" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown yamm-fw">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">منو اصلی<b class="caret"></b></a>
<ul class="nav navbar-nav dropdown-menu">
<!-- Grid 12 Menu -->
<li class="dropdown yamm-fw">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">منو 1<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-12">
.col-sm-12
</div>
</div>
<div class="row">
<div class="col-sm-6">
.col-sm-6
</div>
<div class="col-sm-6">
.col-sm-6
</div>
</div>
<div class="row">
<div class="col-sm-4">
.col-sm-4
</div>
<div class="col-sm-4">
.col-sm-4
</div>
<div class="col-sm-4">
.col-sm-4
</div>
</div>
<div class="row">
<div class="col-sm-3">
.col-sm-3
</div>
<div class="col-sm-3">
.col-sm-3
</div>
<div class="col-sm-3">
.col-sm-3
</div>
<div class="col-sm-3">
.col-sm-3
</div>
</div>
<div class="row">
<div class="col-sm-2">
.col-sm-2
</div>
<div class="col-sm-2">
.col-sm-2
</div>
<div class="col-sm-2">
.col-sm-2
</div>
<div class="col-sm-2">
.col-sm-2
</div>
<div class="col-sm-2">
.col-sm-2
</div>
<div class="col-sm-2">
.col-sm-2
</div>
</div>
<div class="row">
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
<div class="col-sm-1">
.col-sm-1
</div>
</div>
</li>
</ul>
</li>
<!--With Offsets
-->
<li class="dropdown yamm-fw">
<a href="#" data-toggle="dropdown" class="dropdown-toggle"> منو2<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-4">
4
</div>
<div class="col-sm-4 col-sm-offset-4">
4 offset 4
</div>
</div>
<div class="row">
<div class="col-sm-3 col-sm-offset-3">
3 offset 3
</div>
<div class="col-sm-3 col-sm-offset-3">
3 offset 3
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
6 offset 6
</div>
</div>
</li>
</ul>
</li>
<!--Aside Menu
-->
<li class="dropdown yamm-fw">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">منو3<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-3">
<br>
<h3>
3
</h3>
<br>
</div>
<div class="col-sm-9">
<br>
<h3>
9
</h3>
<br>
</div>
</div>
</li>
</ul>
</li>
<!--Nesting Menu
-->
<li class="dropdown yamm-fw">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">منو4<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-12">
12
</div>
</div>
<div class="row">
<div class="col-sm-12">
12
<div class="row">
<div class="col-sm-4">
4
</div>
<div class="col-sm-4">
4
</div>
<div class="col-sm-4">
4
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown yamm-fw"> <a href="#" class="dropdown-toggle"> lk,,,,</a></li>
<li class="dropdown yamm-fw"> <a href="#" class="dropdown-toggle"> lk,,,,</a></li>
<li class="dropdown yamm-fw"> <a href="#" class="dropdown-toggle"> lk,,,,</a></li>
</ul>
</div>
</div>
答案 0 :(得分：0)
最后我找到了答案。你可以在这里看到mega menu in three level。正确的脚本是：
<script>
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
event.preventDefault();
event.stopPropagation();
// If a menu is already open we close it
$('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
// opening the one you clicked on
$(this).parent().addClass('open');
var menu = $(this).parent().find("ul");
var menupos = menu.offset();
if ((menupos.left + menu.width()) + 30 > $(window).width()) {
var newpos = -menu.width();
} else {
var newpos = $(this).parent().width();
}
menu.css({ left: newpos });
});
</script>