Question

我正在尝试在我正在处理的网页中集成可扩展容器，但我在使用JavaScript代码时遇到了一些困难。我不能多次扩展同一个容器。在理想的情况下，我希望能够扩展/折叠容器，我希望一次只能打开一个容器。这是我的小提琴的链接：http://jsfiddle.net/ira525axy/8jgopj2a/

$(window).load(function(){
		if ($(".navBoxes").length > 0)
		{
			var html = document.getElementsByTagName("html").item(0);
			var hasCSS3 = (html.className.indexOf("no-csstransforms") == -1)
			
			$(".no-csstransforms .larger").toggleClass("undisplayed");
			$(".larger").children().toggleClass("undisplayed");
			
			//	Expand nav box
			$(".nav.plus").click(function(){
            $(".openedBox").addClass("undisplayed").removeClass("openedBox");
            var smallerBox = $(this).parents(".navBox");
				var largerBox = smallerBox.next();
				
				if (hasCSS3)
				{
					//smallerBox.siblings(".smaller").toggleClass("contracted");
					//smallerBox.siblings(".smaller").toggleClass("hidden");
					//smallerBox.children().toggleClass("hidden");
					//smallerBox.toggleClass("expanded").delay(600).toggleClass("hidden");
					largerBox.toggleClass("atop").delay(600).toggleClass("hidden");
				}
				else
				{
					//smallerBox.toggleClass("undisplayed");
					//smallerBox.siblings(".smaller").toggleClass("undisplayed");
					largerBox.toggleClass("undisplayed");
				}
				
				largerBox.children().toggleClass("undisplayed");
        largerBox.addClass("openedBox");
        return false;
			});
			
			//	Contract nav box
			$(".nav.minus").click(function(){
        var largerBox = $(this).parents(".navBox");
        $(".openedBox").addClass("undisplayed").removeClass("openedBox");
				var smallerBox = largerBox.prev();
				
				largerBox.children().toggleClass("undisplayed");
				
				if (hasCSS3)
				{
					largerBox.toggleClass("hidden");
					largerBox.toggleClass("atop")
					//smallerBox.toggleClass("hidden");
					//smallerBox.toggleClass("expanded");
					//smallerBox.children().toggleClass("hidden");
					//smallerBox.siblings(".smaller").toggleClass("hidden");
					//smallerBox.siblings(".smaller").toggleClass("contracted");
				}
				else
				{
					largerBox.toggleClass("undisplayed");
					//smallerBox.toggleClass("undisplayed");
					//smallerBox.siblings(".smaller").toggleClass("undisplayed");
				}
				
				return false;
			});	
		}
		setOrgChartDimensions();
})(jQuery);

.navBoxes .undisplayed{display: none;}
.navBoxes .navBox{position: absolute; float: left;color: #fff;}
.navBoxes .navBox.smaller{width: 160px; height: 160px; z-index: 2;}
.navBoxes .navBox.smaller.atop{z-index: 4;}
.navBoxes .navBox.larger{width: inherit; z-index: 1;}
.navBoxes .navBox.hidden{opacity: 0.0;}
.navBoxes .navBox.larger.atop{z-index: 3;}
.navBoxes .navBox.larger .icon{float: left;}
.navBoxes .navBox.smaller a{color: #fff;}
.navBoxes .navBox.larger .title{position: relative; top: 10px;}
.navBoxes .navBox.larger .body{margin-top: 20px;}
.navBoxes .navBox.larger .body a{color: #fff; text-decoration: underline;}
.navBoxes .navBox .nav {position: absolute; width: 35px; height: 30px; padding-top: 5px;}
.navBoxes .navBox .nav a{color: #fff;}
.navBoxes .navBox .nav.plus{top: 110px; left: 110px;}
.navBoxes .navBox .nav.minus{position:relative; float:right;}
.navBoxes .box1 {background-color: #185394; transform-origin: top left;}
.navBoxes .box1.smaller:hover {background-color: #214872;}
.navBoxes .box2 {background-color: #c94747; transform-origin: top right;}
.navBoxes .box2.smaller:hover{background-color: #b24444;}
.navBoxes .box2.smaller{margin-left: 180px;}

<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body> 
    <div class="navBoxes">
	<div class="navBox box1 smaller">
		<div class="title"><a href="#">Heading 1</div>
		<div class="nav plus">
			<div class="sign"><a aria-expanded="false" href="/">more</a></div>
		</div>
	</div>
	<div class="navBox box1 larger hidden">
		<div class="body">
		<p>- Some Text - Some Text - Some Text - Some Text -</p>
		</div>
		<div class="nav minus">
			<div class="sign"><a aria-expanded="true" href="/">less</a></div>
		</div>
	</div>
	<div class="navBox box2 smaller">
		<div class="title"><a href="#">Heading 2</a></div>
		<div class="nav plus">
			<div class="sign"><a aria-expanded="false" href="/">more</a></div>
		</div>
	</div>
	<div class="navBox box2 larger hidden">
		<div class="body">
			<p>- Some Text - Some Text - Some Text - Some Text -</p>
		</div>
		<div class="nav minus">
			<div class="sign"><a aria-expanded="true" href="/">less</a></div>
		</div>
	</div>
</div>
</html>

Answer 1

删除CSS文件的第一行。它导致它总是隐藏。

您已经通过操纵不透明度和z-index来实现目标。隐藏它的行导致它永远设置为display：none;

如果您想使用显示方法执行此操作，则需要检查何时单击更多显示器的当前设置在您要显示的元素上。如果设置为none，则将其设置为block，如果block设置为none。

Answer 2

请查看updated fiddle

仅更新了HTML和JS。

$(function(){
        $('[aria-expanded="false"]').on('click', function(){
            $dt = $(this).parents('.smaller');
            if( $dt.data('target') != undefined ){
                $('.larger.'+$dt.data('target')).toggleClass('hidden').toggleClass('atop');
            }
        });
});

如何多次使用jQuery扩展容器？

2 个答案: