0

我有这个列表项目要显示。我想打开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>
4

3 回答 3

4

演示

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

});
于 2013-08-23T08:36:30.727 回答
1

更好的方法...

所以我回答了另一个提到这个旧答案的问题。我发现这个答案有一些问题。一方面，它有点长而且令人费解。确实不需要所有数据和类的检查和更改，除非您只是想添加/切换类/数据以供以后使用。其次，它看起来很“滞后”。它会随着变化而上下跳跃。

以下内容清晰、简单、流畅，只要它们遵循基本的 HTML 标记，就可以在多级菜单上工作UL>LI>A+UL>LI。selectors只需更改以下代码中的 ，就可以轻松更改后半部分。

简单的代码：

$(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' }); });
})

完整的流体示例：</* 带解释 */>

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

于 2016-04-04T17:16:58.573 回答
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>
于 2013-08-23T08:33:11.513 回答