javascript - Displayhide sub list items in jQuery - Stack Overflow|江阴雨辰互联

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

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

Share Improve this question edited Aug 23, 2013 at 8:40 Manish Kumar 15.5k5 gold badges20 silver badges27 bronze badges asked Aug 23, 2013 at 8:30 AndyCola 922 silver badges9 bronze badges

Very similar, because I need to close the submenu onclick when it's already opened. In the demo you can't close a submenu unless you click on others. – AndyCola Commented Aug 23, 2013 at 8:54

Add a ment |

3 Answers 3

Sorted by: Reset to default 4

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");
    });

});

A better way ...

So I gave an answer to another question that referred to this old answer. I find a few things wrong with this answer. For one thing, it's a bit long and convoluted. There's really no need for all the data and class checks and changes, unless you simply want to add/toggle class/data for sake of later use. Secondly, it's "laggy" looking. It jumps up and down on changes.

The following is clear plain, simple, smooth, and works on multiple levels of menu as long as they follow the basic HTML mark up of UL>LI>A+UL>LI. The latter part can be easily changed by simply changing the selectors in the following code.

The simple code:

$(function() {
    $(document).on('click', 'li a', function(e) {
        e.preventDefault();
        $(this).parents('li').each(function(i) { $(this).siblings().find('ul').slideUp(); });
        $(this).next('ul').slideToggle(function() { if (!$(this).is(':visible')) $(this).find('ul').hide(); });
    });
    $('li').each(function(i) { if ($(this).children('ul').length) $(this).css({ cursor: 'pointer' }); });
})

Full Fluid Example: ^{_{</* With explanations */>}}

//	simply jQuery shorthand for document.ready = function() { ...
$(function() {
	//	the following is how to add events so that they work for even "dynamically" created elements. 
	//	That is, elements created after code/page load.
	$(document).on('click', 'li a', function(e) {
		e.preventDefault();	//	ensure it doesn't try to follow a link
		//	close all possible siblings and cousins
		$(this).parents('li').each(function(i) { $(this).siblings().find('ul').slideUp(); });
		//	slide toggle current possible sub menu
		//  and close any children if no longer visible
		$(this).next('ul').slideToggle(function() { if (!$(this).is(':visible')) $(this).find('ul').hide(); });
	});
	//	unment the following line to ensure all sublist are closed, 
	//	however, i strongly remend this should be done using css
	//	$('ul ul').hide();
	//	change cursor for li elements having a sub menu
	$('li').each(function(i) {
		if ($(this).children('ul').length) {	//	test if it has a submenu
			$(this).css({ cursor: 'pointer' });
			
			//	just for this test, i'm going to add a background color to A tags on li's having a submenu
			//  and a little text to make it more obvious
			var cntSubMenus = $(this).children('ul').find('li > ul').length,
				txt = !cntSubMenus ? ' - is a SubMenu Header' : (' - has ['+cntSubMenus+'] subMenu' + (cntSubMenus > 1 ? "s" : ""));
			$(this).addClass('level-' + $(this).parents('li').length)
			  .children('a').append(txt);
		}
	});
})

/*  this simply hides all submenus outright  */
ul ul { display: none; }

/*  used just for visual aid  */
li { margin: .25em auto; }
li a { padding: .1em .25em; }
.level-0 > a, .level-8 > a { background-color: #1B00F8; color: #FFF; }
.level-1 > a, .level-9 > a { background-color: #f8f800; }
.level-2 > a, .level-10 > a { background-color: #C7FFFF; }
.level-3 > a, .level-11 > a { background-color: #C7FFCB; }
.level-4 > a, .level-12 > a { background-color: #E2C7FF; }
.level-5 > a, .level-13 > a { background-color: #FFC7C7; }
.level-6 > a, .level-14 > a { background-color: #C7FFED; }
.level-7 > a, .level-15 > a { background-color: #F9FFC7; }

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<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>
						<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>
						</ul>
					</li>
					<li><a>The standard chunk</a>
						<ul id="nav">
							<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>
											<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>
																<ul id="nav">
																	<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>
																</ul>
															</li>
															<li><a>The standard chunk</a></li>
															<li><a>There are many variations</a></li>
														</ul>
												</li>
											</ul>
										</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 pany</a></li>
						</ul>
					</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>
						<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>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>
										<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>
															<ul id="nav">
																<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>
																				<ul id="nav">
																					<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>
																				</ul>
																			</li>
																			<li><a>Contrary to popular belief</a>
																				<ul id="nav">
																					<li class="expanded"><a class="on">Office and address services</a>
																							<ul class="submuneu">
																								<li><a>Lorem Ipsum is simply</a>
																									<ul id="nav">
																										<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>
																									</ul>
																								</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>
																				</ul>
																			</li>
																			<li><a>The standard chunk</a>
																				<ul id="nav">
																					<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>
																				</ul>
																			</li>
																			<li><a>There are many variations</a></li>
																		</ul>
																</li>
															</ul>
														</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>Making changes to a pany</a></li>
										</ul>
									</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 pany</a></li>
						</ul>
					</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 pany</a></li>
	</ul>
</div>

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

});
</script>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745414237a4626672.html

javascript - Displayhide sub list items in jQuery - Stack Overflow

3 Answers 3

The simple code:

Full Fluid Example: ^{_{</* With explanations */>}}

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Displayhide sub list items in jQuery - Stack Overflow

3 Answers 3

The simple code:

Full Fluid Example: </* With explanations */>

相关推荐