在jQuery中显示/隐藏子列表项

时间：2013-08-23 08:30:38

标签： javascript jquery

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

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

3 个答案:

答案 0 :(得分：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");
    });

});

答案 1 :(得分：1)

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(); });
	});
	//	uncomment the following line to ensure all sublist are closed, 
	//	however, i strongly recommend 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.com/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 company</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 company</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 company</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 company</a></li>
	</ul>
</div>

答案 2 :(得分：0)

<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>
相关问题
最新问题