展开时折叠所有其他手风琴项目 [英] Collapse all other accordion items when one is expanded

问题描述

我有一个手风琴菜单，效果很好.但是现在，我希望一次仅扩展一个父项.换句话说，当我单击以展开一个父项时，任何其他展开的父项都需要折叠.我认为添加一条线来向上滑动同级元素会起作用，但是不是那样，或者我做错了.有什么想法吗?

I have an accordion menu that works nicely. But now, I want only one parent item expanded at a time. In other words, when I click to expand one parent item, any other expanded parent item needs to collapse. I thought adding a line to slide the sibling elements up would work, but either that's not it, or I'm doing it wrong. Any ideas?

这是我的 jsfiddle

这是我的代码:

CSS

a
    {
        cursor: pointer;
    }

.menu ul 
    {
        list-style: none outside none;
    }

.menu li a 
    {
        line-height: 25px;
    }

.menu > ul > li > a 
    {
        color: #3B4C56;
        display: block;
        font-weight: normal;
        position: relative;
        text-decoration: none;
    }

.menu li.parent > a 
    {
        padding: 0 0 0 28px;
    }

.menu li.parent > a:before 
    {
        background-image: url("../images/plus_minus_icons.png");
        background-position: 25px center;
         content: ""; 
        display: block;
        height: 21px;
        left: 0;
        position: absolute;
        top: 2px;
        vertical-align: middle;
        width: 23px;
    }

.menu ul li.active > a:before 
    {
        background-position: 0 center;
    }

.menu ul li ul 
    {
        border-left: 1px solid #D9DADB;
        display: none;
        margin: 0 0 0 12px;
        overflow: hidden;
        padding: 0 0 0 25px;
    }

.menu ul li ul li 
    {
        position: relative;
    }

.menu ul li ul li:before 
    {
        border-bottom: 1px dashed #E2E2E3;
        content: "";
        left: -20px;
        position: absolute;
        top: 12px;
        width: 15px;
    }

jQuery

$( document ).ready( function( ) {
        $( '.menu li' ).each( function() {
                if( $( this ).children( 'ul' ).length > 0 ) {
                        $( this ).addClass( 'parent' );     
                }
        });

        $( '.menu li.parent > a' ).click( function(event) {

            if($(this).next('ul').is(':hidden'))
            {
                event.preventDefault();            

                $( this ).parent().toggleClass( 'active' );
                $( this ).parent().children( 'ul' ).slideDown( 'fast' );
                $( this ).parent().children.siblings( 'ul' ).slideUp( 'fast' );
            }
        });

});

HTML

<div class="menu">
    <ul>
        <li><a href="http://www.google.com">Menu item 1</a>
            <ul>
                <li><a>Menu item 1.1</a></li>
                <li><a>Menu item 1.2</a>
                    <ul>
                        <li><a>Menu item 1.2.1</a></li>
                        <li><a>Menu item 1.2.2</a></li>
                        <li><a>Menu item 1.2.3</a></li>
                    </ul>
                </li>
                <li><a>Menu item 1.3</a></li>
            </ul>
        </li>
        <li><a href="http://www.apple.com">Menu item 2</a>
            <ul>
                <li><a>Menu item 2.1</a></li>
                <li><a>Menu item 2.2</a>
                    <ul>
                        <li><a>Menu item 2.2.1</a></li>
                        <li><a>Menu item 2.2.2</a></li>
                        <li><a>Menu item 2.2.3</a></li>
                    </ul>
                </li>
                <li><a>Menu item 2.3</a></li>
            </ul>
        </li>
        <li><a href="http://www.twitter.com">Menu item 3</a>
            <ul>
                <li><a>Menu item 1.1</a></li>
                <li><a>Menu item 1.2</a>
                    <ul>
                        <li><a>Menu item 1.2.1</a></li>
                        <li><a>Menu item 1.2.2</a></li>
                        <li><a>Menu item 1.2.3</a></li>
                    </ul>
                </li>
                <li><a>Menu item 1.3</a></li>
            </ul>
        </li>
    </ul>
</div>

推荐答案

您必须添加以下内容:

$(this).parent().siblings().find('ul').slideUp('fast');

提琴: http://jsfiddle.net/7gxaprtt/7/

这篇关于展开时折叠所有其他手风琴项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！