-1

我希望在单击主链接时打开它的子​​链接，当我单击任何其他主链接时，它的子链接打开并且之前打开的关闭。一次只能打开一个菜单。这里是小提琴http://jsfiddle.net/ ZCrk4/6/

<!-- Wrapper -->
<div id="wrapper">

    <!-- Container -->
    <div id="container" class="resolution_800x600">

        <!-- Colonnage -->
        <div id="colonnes" class="clear">

                <!-- Navigation Level 02 -->
                <div id="nav1" class="navigation_02">

                    <ul>
                        <li><a href="#">Menu 1</a>
                            <ul>
                                <li><a href="#11">Sub menu 1</a></li>
                                <li><a href="#12">Sub menu 2</a></li>   
                                <li><a href="#13">Sub menu 3</a></li>                       
                            </ul>
                        </li>
                        <li><a href="#">Menu 2</a>
                            <ul>
                                <li><a href="#21">Sub menu 1</a></li>
                                <li><a href="#22">Sub menu 2</a></li>                       
                            </ul>
                        </li>                   
                        <li><a href="#">Menu 3</a>
                            <ul>
                                <li><a href="#31">Sub menu 1</a></li>
                                <li><a href="secondary-navigation.html" class="active" title="Sub menu 2 (Current page)">Sub menu 2</a></li>
                                <li><a href="#33">Sub menu 3</a></li>
                                <li><a href="#34">Sub menu 4</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Menu 4</a>
                            <ul>
                                <li><a href="#41">Sub menu 1</a></li>
                                <li><a href="#42">Sub menu 2</a></li>   
                                <li><a href="#43">Sub menu 3</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- /Navigation Level 02 -->

        </div>
        <!-- /Colonnage -->

    </div>
    <!-- /Container -->

</div>
<!-- /Wrapper -->
4

2 回答 2

3

演示

var nav = $('#nav1 > ul > li');
nav.find('li').hide();
nav.click(function () {
    nav.not(this).find('li').hide();
    $(this).find('li').slideToggle();
});

或者

演示

var nav = $('#nav1 > ul > li');
nav.children('ul').children('li').hide();
nav.click(function () {
    nav.children('ul').children('li').hide();
    $(this).children('ul').children('li').show();
});
于 2013-10-18T04:42:43.800 回答
1

像这样？

JS：

$('.navigation_02 li:has("ul") > a').on('click', function (e) {
    var $this = $(this);
    $('.navigation_02 a.active').not($this).removeClass('active').next().stop(true, true).slideUp('slow');
    $this.addClass('active').next().stop(true, true).slideToggle('slow');
});

CSS：

.navigation_02 > ul > li ul {
    display:none;
}
.active{
    font-style:bold;
    background-color:#cecece;

}

演示

于 2013-10-18T04:40:03.207 回答