1

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

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

操作,单击顶部菜单项,将出现一个子菜单链接。如果单击子菜单链接,则该链接将出现与该原始链接相对应的子菜单项,并隐藏除自身及其父项之外的所有内容。

如果我解释得当,我不是陛下。由于整天试图解决这个问题,我的脑袋有点脑残,我即将陷入困境。

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

在此处输入图像描述

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

2 回答 2

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/

于 2013-07-23T21:28:04.160 回答
0

请检查下面的代码。我编辑了 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-->
于 2013-12-25T09:15:40.640 回答