Question

我正在尝试实施纸卡功能。

一切似乎都运行良好，但我不能只限制一个容器来扩展更多点击。我可以一次打开多个容器，这不是我想要的。我希望活动容器在我尝试打开另一个时自动关闭。这是我的代码： HMTL：

(function ($) {
	$(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{
	width: 522px;}
.navBoxes .undisplayed
{display: none;}
.navBoxes .navBox
{position: absolute;
	float: left;
	clear: none;
	padding: 0 15px;
	color: #fff;
	font-family: Helvetica;
	box-sizing: border-box;}
.navBoxes .navBox.smaller{
	width: 160px;
	height: 160px;
	z-index: 2;
	text-align: center;
	cursor: pointer;}
.navBoxes .navBox.smaller.atop{z-index: 4;}
.navBoxes .navBox.larger
{height: auto;
    opacity: 0.95;
    overflow: auto;
    width: inherit;
    z-index: 1;
	filter: alpha(opacity=95); /* For IE8 and earlier */}
.navBoxes .navBox.hidden
{opacity: 0.0;}
.navBoxes .navBox.larger.atop
{z-index: 3;}
.navBoxes .navBox.larger .icon{
	float: left;
	margin-right: 10px;}
.navBoxes .navBox .title
{font-weight: 600;
	font-size: 17px;
	line-height: 20px;}
.navBoxes .navBox.smaller .title
{margin-top: 8px;}
.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;
	text-align: center;
	cursor: pointer;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;}
.navBoxes .navBox .nav a
{	color: #fff;
	text-decoration: none;}
.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

我在这里的代码中做的是每当你想打开一个盒子时我从拥有它的人那里删除了类openedBox（可能为null）。而且我只把它放在我想要打开的盒子上。当我关闭盒子时，我也将其移除。找到这些行：

    $(".nav.plus").click(function(){
        var smallerBox = $(this).parents(".navBox");

将其替换为：

        $(".nav.plus").click(function(){
            $(".openedBox").addClass("undisplayed").removeClass("openedBox");
            var smallerBox = $(this).parents(".navBox");

找到这些行：

        largerBox.children().toggleClass("undisplayed");
        return false;

将其替换为：

        largerBox.children().toggleClass("undisplayed");
        largerBox.addClass("openedBox");
        return false;

查找

    $(".nav.minus").click(function(){
        var largerBox = $(this).parents(".navBox");

将其替换为：

    $(".nav.minus").click(function(){
        var largerBox = $(this).parents(".navBox");
        $(".openedBox").addClass("undisplayed").removeClass("openedBox");

如何只允许一个容器扩展更多点击？

1 个答案: