我需要一些帮助。我到处寻找,但我确实认为我正在寻找的东西有点独特。
我正在尝试制作一个菜单,当您单击菜单选项时会显示一组选项。那一点我得到了,我想。我现在想要实现的是让它允许子菜单的子菜单直接滑入链接行之间。有点像水平手风琴菜单,其扭曲之处在于将所有顶部菜单链接排成一排,而不是垂直排列。
操作,单击顶部菜单项,将出现一个子菜单链接。如果单击子菜单链接,则该链接将出现与该原始链接相对应的子菜单项,并隐藏除自身及其父项之外的所有内容。
如果我解释得当,我不是陛下。由于整天试图解决这个问题,我的脑袋有点脑残,我即将陷入困境。
这是我试图实现的一个例子:
如果你想去这里看看我做了什么http://jsfiddle.net/pi_mai/zuU5M/ 所以我正在尝试用这个 HTML 代码制作一个菜单(我已经删除了许多链接项以缩短代码):
<nav>
<ul class="topmenu">
<li class="topmenu-item-1"><a href="" class="topmenu-link">top menu</a></li>
<li class="topmenu-item-2"><a href="" class="topmenu-link">top menu</a></li>
</ul>
<ul class="submenu topmenu-item-1">
<li class="submenu-item-1"><a href="" class="topmenu-link">top menu</a></li>
<li class="submenu-item-2"><a href="" class="topmenu-link">top menu</a></li>
</ul>
<ul class="subsubmenu submenu-item-1">
<li class="submenu-item-1"><a href="" class="topmenu-link">top menu</a></li>
<li class="submenu-item-2"><a href="" class="topmenu-link">top menu</a></li>
</ul>
<ul class="submenu topmenu-item-1">
<li class="submenu-item-7"><a href="" class="topmenu-link">top menu</a></li>
<li class="submenu-item-8"><a href="" class="topmenu-link">top menu</a></li>
</ul>
<ul class="submenu topmenu-item-2">
<li class="submenu-item-1"><a href="" class="topmenu-link">top menu</a></li>
<li class="submenu-item-2"><a href="" class="topmenu-link">top menu</a></li>
</ul>
<ul class="submenu topmenu-item-3">
<li class="submenu-item-1"><a href="" class="topmenu-link">top menu</a></li>
<li class="submenu-item-2"><a href="" class="topmenu-link">top menu</a></li>
</ul>
</nav>
.
$('.topmenu > li').on('click',function(){
var itemClass = $(this).attr('class');
console.log(itemClass)
$('.submenu').not(this).removeClass('toggle');
$('.submenu.' + itemClass ).toggleClass('toggle');
$('.subsubmenu.toggle').siblings().removeClass('toggle')
});
$('.submenu > li').on('click',function(){
var itemClass = $(this).attr('class');
console.log(itemClass)
$('.subsubmenu').not(this).removeClass('toggle');
$('.subsubmenu.' + itemClass ).toggleClass('toggle');
});
谁能帮我?
编辑
我想我有解决方案,只需要添加动画,但它的整体工作,对我来说太棒了!
function menuTap( $this ){
var thisClass = $this.attr('class');
if( $this.parent().hasClass("top-menu") ){
$('.sub-menu.' + thisClass ).animate().toggleClass('hide');
$('.sub-menu' + ':not(.' + thisClass + '), .sub-sub-menu' ).addClass('hide');
};
if( $this.parent().hasClass("sub-menu") ){
console.log( $this.attr('class') + ' li was clicked')
$('.sub-sub-menu.' + thisClass ).toggleClass('hide');
$('.sub-sub-menu' + ':not(.' + thisClass + ')' ).addClass('hide');
};
}
$('.top-menu li, .sub-menu li').on('click',function(){
menuTap( $(this) );
});