【问题标题】：horizontal jquery menu with subsectons带有子部分的水平 jquery 菜单
【发布时间】：2013-07-23 21:09:48
【问题描述】：

我需要一些帮助。我到处寻找，但我确实认为我正在寻找的东西有点独特。

我正在尝试制作一个菜单，当您单击菜单选项时会显示一组选项。那一点我得到了，我想。我现在想要实现的是让它允许子菜单的子菜单直接滑入链接行之间。有点像水平手风琴式菜单，其特点是将所有顶部菜单链接排成一排，而不是垂直排列。

动作，点击顶部菜单项，将出现一个子菜单链接。如果单击子菜单链接，则该链接将显示与该原始链接对应的子子菜单项，并隐藏除自身及其父项之外的所有项。

如果我解释得当，我不是陛下。一整天都在尝试解决这个问题，我的脑袋有点昏昏沉沉，我即将陷入困境。

这是我试图实现的一个例子：

如果你想去这里看看我做了什么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) );
});

【问题讨论】：

标签： jquery css menu

【解决方案1】：

一个主要障碍是您的 HTML 结构。几乎所有的菜单都会有这样的东西，其中子菜单嵌套在它们的父项中：

<ul class="topmenu">
  <li><a></a>
    <ul class="submenu">...</ul>
  </li>
</ul>

而你有这个，子菜单作为他们父母的兄弟姐妹：

<ul class="topmenu">
  ...
</ul>

<ul class="submenu">
  ...
</ul>

基于父子关系调用元素比通过类或兄弟关系更简单。

这是一个开始。我现在没时间了。 http://jsfiddle.net/isherwood/zuU5M/1/

【讨论】：

普通菜单结构并不是解决这个问题的最佳方案，因为这是我最初尝试完成的。我选择的方法是子子菜单可以撕开子菜单。对于典型的菜单系统，子菜单只会出现在底部。
实际上，这个结构的全部意义在于子菜单出现在它们位于父列表中的位置。它们的显示方式取决于您的 CSS 和 jQuery 细节。无论如何，祝你好运。

【解决方案2】：

请检查下面的代码。我已经编辑了 html、css 和 javascript。

Javascript 代码

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
<script>
    $(document).ready(function(){
    jQuery('.topmenu-link').click(function(){
        if(!jQuery(this).hasClass('open')){
            jQuery('.topmenu-link').removeClass('open');
            jQuery('.submenu-part').stop(true,true).slideUp();
            jQuery(this).parent('.topmenu-item').children('.submenu-part').stop(true,true).slideDown();
            jQuery(this).addClass('open');  
        }else{
            jQuery(this).removeClass('open');
            jQuery('.submenu-part').stop(true,true).slideUp();
        }
    });
    
     });
</script> 
<!--script end-->

CSS代码

<!--css start-->
<style>
body{
    background-color: #333;
    padding: 20px;  
    color:white;
    font-family: arial;
}
a{
    color: aqua;
}
.clear{clear:both;}
.topmenu{
    background-color: green;
}
ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
li.topmenu-item{
    float: left;
    margin: 0 2px 0 0;
    cursor: pointer;
    position:relative;
    zoom:1;
    
}
.topmenu-link{
    padding: 20px;
    display:block;
}
.submenu-part{
    background:#060;
    width:200px;
    padding:10px;
    position:absolute;
    top:59px;
    left:0px;
    display:none;
}
.submenu-item-link{
    margin:5px 0px;
    display:block;
}
.submenu-item-link a{
    margin:8px 0px;
    display:block;
}
        
</style>
<!--css end-->

HTML代码

<!--html content start-->
<nav>
    <ul class="topmenu">
        <li class="topmenu-item">
            <a href="javascript:;" class="topmenu-link">top menu 1</a>
            <ul class="submenu-part">
                <li class="submenu-item-link"><a href="" >top menu 1</a></li>
                <li class="submenu-item-link"><a href="" >top menu 2</a></li>
                <li class="submenu-item-link"><a href="" >top menu 3</a></li>
                <li class="submenu-item-link"><a href="" >top menu 4</a></li>
            </ul>
        </li>
        
        <li class="topmenu-item">
            <a href="javascript:;" class="topmenu-link">top menu 2</a>
            <ul class="submenu-part">
                <li class="submenu-item-link"><a href="" >top menu 1</a></li>
                <li class="submenu-item-link"><a href="" >top menu 2</a></li>
            </ul>
        </li>
        
        <li class="topmenu-item">
            <a href="javascript:;" class="topmenu-link">top menu 3</a>
            <ul class="submenu-part">
                <li class="submenu-item-link"><a href="" >top menu 1</a></li>
                <li class="submenu-item-link"><a href="" >top menu 2</a></li>
                <li class="submenu-item-link"><a href="" >top menu 3</a></li>
            </ul>
        </li>
        
        <li class="topmenu-item">
            <a href="javascript:;" class="topmenu-link">top menu 4</a>
            <ul class="submenu-part">
                <li class="submenu-item-link"><a href="" >top menu 1</a></li>
                <li class="submenu-item-link"><a href="" >top menu 2</a></li>
                <li class="submenu-item-link"><a href="" >top menu 3</a></li>
                <li class="submenu-item-link"><a href="" >top menu 4</a></li>
                <li class="submenu-item-link"><a href="" >top menu 5</a></li>
                <li class="submenu-item-link"><a href="" >top menu 6</a></li>
                <li class="submenu-item-link"><a href="" >top menu 7</a></li>
                <li class="submenu-item-link"><a href="" >top menu 8</a></li>
            </ul>
        </li>
        <li class="clear"></li>
    </ul>
</nav>
<!--html content end-->

【讨论】：