我正在尝试将可扩展容器集成到我正在处理的网页中，但我在使用 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>删除 CSS 文件的第一行。它导致它始终保持隐藏状态。
通过操纵
opacityz-indexdisplay: none;如果您想使用显示方法执行此操作，那么当单击“更多”时，您需要检查要显示的元素上
displaynoneblockblocknone请检查更新的小提琴
仅更新了一点 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');
}
});
});