在jQuery中显示/隐藏子列表项 [英] Display/hide sub list items in jQuery

问题描述

我有此列表要显示的项目.我想打开A onclick，如果我单击B，它会打开B并自动关闭A.现在，如果已经打开子菜单，只需手动onclick，就可以了，这很好，但是我也需要自动关闭.

I have this list Items to show. I want to open A onclick and if I click B it opens B and closes automatically A. Now close the sub-menu just manually onclick if it's already opened, and this is fine, but I need the automatically closure too.

<style>
    #content_templ1 .expanded ul {display: none;}
</style>

<div class="leftsidebar_templ1">
    <ul id="nav">
        <li class="expanded"><a class="on">Form a Compalny</a>
            <ul class="submuneu">
                <li><a>United Kingdom (UK)</a></li>
                <li><a>United States of America (USA)</a></li>
                <li><a>Classic Offshore</a></li>
                <li><a>Alternative offshore Companies</a></li>
            </ul>
        </li>

        <li class="expanded"><a class="on">Office and address services</a>
            <ul class="submuneu">
                <li><a>Lorem Ipsum is simply</a></li>
                <li><a>Contrary to popular belief</a></li>
                <li><a>The standard chunk</a></li>
                <li><a>There are many variations</a></li>
            </ul>
        </li>

        <li class="expanded"><a class="on">Nominee Services</a>
            <ul class="submuneu">
                <li><a>Lorem Ipsum is simply</a></li>
                <li><a>Contrary to popular belief</a></li>
                <li><a>The standard chunk</a></li>
                <li><a>There are many variations</a></li>
            </ul>
        </li>

        <li class="expanded"><a class="on">Corporate Banking</a>
            <ul class="submuneu">
                <li><a>Lorem Ipsum is simply</a></li>
                <li><a>Contrary to popular belief</a></li>
                <li><a>The standard chunk</a></li>
                <li><a>There are many variations</a></li>
            </ul>
        </li>

        <li class="expanded"><a>Accountancy and Audit</a>
            <ul class="submuneu">
                <li><a>United Kingdom (UK)</a></li>
                <li><a>United States of America (USA)</a></li>
                <li><a>Classic Offshore</a></li>
                <li><a>Alternative offshore Companies</a></li>
            </ul>
        </li>

        <li class="expanded"><a>Name protection services</a>
            <ul class="submuneu">
                <li><a>Lorem Ipsum is simply</a></li>
                <li><a>Contrary to popular belief</a></li>
                <li><a>The standard chunk</a></li>
                <li><a>There are many variations</a></li>
            </ul>
        </li>
        <li class="expanded"><a>Making changes to a company</a></li>
    </ul>   

</div> 

jQuery:

<script>
$(document).ready(function(){
    $('ul li.expanded > a').click(function(event){
        $(this).parent().find('ul').slideToggle('slow');
    });
        $('a.on').click(function(){
        $('a.on').removeClass("active");
        $(this).addClass("active");
    });

});
</script>

推荐答案

演示

Demo

$(document).ready(function(){   
    $('ul li.expanded > a')
    .attr('data-active','0')
    .click(function(event){
       $('.submuneu').hide();    
        if($(this).attr('data-active')==0){
            $(this).parent().find('ul').slideToggle('slow');
            $(this).attr('data-active','1');
        }
        else
          $(this).attr('data-active','0');        
    });
        $('a.on').click(function(){
        $('a.on').removeClass("active");
        $(this).addClass("active");
    });

});

这篇关于在jQuery中显示/隐藏子列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！