Javascript代码

Question

我需要一些帮助。我到处都看，但我觉得我在寻找的东西有点独特。

我正在尝试创建一个菜单，当您单击菜单选项时，可以选择一组选项。我想，我得到了那一点。我现在试图实现的是让子菜单的子项直接在链接线之间滑动。有点像一个水平的手风琴菜单，扭曲的是所有顶部菜单链接连续而不是垂直。

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

如果我正确地解释它，我不会生父亲。我试图整天解决这个问题并且即将陷入困境，脑子里有点脑死亡。

这是我想要实现的一个例子：

enter image description here

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

Answer 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/

Answer 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-->

带有子部分的水平jquery菜单

2 个答案:

Javascript代码

Css代码

Html代码