Question

我试图制作一个多层次的垂直手风琴菜单，但我一直都在失败：/我是客户端编程的新手。

这是我的清单：

<div class="sidebar">
    <ul>
        <li><a href="javascript:void(0)">Home</a>
        <li class="arrow"><a href="javascript:void(0)">Program</a></li>
            <ul class="sub-menu">
                <li><a href="javascript:void(0)">Program at a Glance</a></li>
                <li><a href="javascript:void(0)">Theme and Keynote Speakers</a></li>
                <li class="arrow"><a href="javascript:void(0)">Call for Abstract</a>
                    <ul class="sub-menu">
                        <li class="arrow"><a href="javascript:void(0)" style="font-size:12px;">Abstract Guidelines</a></li>
                        <li><a href="javascript:void(0)" style="font-size:12px;">Submit Your Abstract</a></li>
                    </ul>
                </li>
                <li><a href="javascript:void(0)">Student Activities</a></li>
                <li><a href="javascript:void(0)">Pre-Congress Workshops</a></li>
                <li><a href="javascript:void(0)">Other Activities</a></li>
            </ul>
        <li class="arrow"><a href="javascript:void(0)">Refistration</a></li>
            <ul class="sub-menu">
                <li ><a href="javascript:void(0)">Registration Information</a></li>
                <li><a href="javascript:void(0)">Official Letters of Invitation</a></li>
            </ul>
        <li><a href="javascript:void(0)">Accomodation</a></li>
        <li class="arrow"><a href="javascript:void(0)">Sponsors & Exhibirtors</a></li>
            <ul class="sub-menu">
                <li><a href="javascript:void(0)">Confirmed Sponsors</a></li>
                <li><a href="javascript:void(0)">Confirmed Exhibitors</a></li>
                <li><a href="javascript:void(0)">Why Become a Sponsor</a></li>
                <li><a href="javascript:void(0)">Sponsorship Opportunities</a></li>
                <li><a href="javascript:void(0)">Exhibit Opportunities</a></li>
                <li class="arrow"><a href="javascript:void(0)">Exhibitor Information</a></li>
                    <ul class="sub-menu">
                        <li ><a href="javascript:void(0)">Floor Plane</a></li>
                        <li ><a href="javascript:void(0)">Exhibit Hours</a></li>
                        <li><a href="javascript:void(0)">Manual</a></li>
                    </ul>
            </ul>
    </ul>  
</div>

这是我的职责：

$(document).ready(function () {
    $('.sidebar ul li a').click(function (ev) {
        $('.sidebar .sub-menu').not($(this).parents('.sub-menu')).slideUp();
        $(this).next('.sub-menu').slideToggle();
        ev.stopPropagation();
    });
});

这是我的CSS，我只是测试所以颜色可能是奇怪的：

 .sidebar 
    {
        margin: 0;
        padding: 0;
        float:left;
        width: 180px;
    }

    li.arrow{
        background:#fff url(images/GCHERA/arrow-down.png) no-repeat right center;
    }

    .sidebar ul 
    {
        margin: 10px 0 0 0 ;
        padding: 0 0 0 10px;
        list-style: none;
        text-indent: 0px;
        display:block;
    }

    .sidebar li 
    {
        margin-top: 3px;

    }

        .sidebar>ul>li 
        {
            background-color:red;
        }


    .sidebar a 
    {
        font: 16px;
        color: #008c44;
        display: block;
        height: 32px;
        text-decoration: none;
    }

    .sidebar a:hover 
    {
        text-decoration: underline;
        padding-left:5px;
    }

    .sidebar ul ul {
    display:none;   
    }     

     .sidebar>ul>li>ul
    {
        background-color:green;
    }

    .sidebar>ul>li>ul>li 
    {
        background-color:green;
    }

     .sidebar>ul>li>ul>li>ul
    {
        background-color:blue;
    }

    .sidebar>ul>li>ul>li>ul>li
    {
        background-color:blue;
    }

它只允许第一次出现。请帮忙吗？我是菜单和jQuery的新手。

这是我使用的小提琴：http://jsfiddle.net/jfzx7/

Answer 1

问题与您的HTML有关，请检查并正确对齐。找到相应的小提琴。

多级垂直手风琴菜单

1 个答案: