我在三级创建菜单 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>
最佳答案
终于找到答案了。你可以在这里看到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>
关于javascript - super 菜单的第三级不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26904385/