jquery - 创建 3 个 Div，在单击时展开并显示内容

Question

我正在尝试创建 3 个内联 block div，当您单击它们时，它们会展开(使用答案 Pranav C Balan How to expand and collapse three div's side by side? 中的代码)

我有 3 个加号图标，当选择时会旋转以显示 x，然后如果再次选择它或选择不同的 div，它会旋转回加号。 3 个主要的 div 在单击时展开，就像上面链接中 Pranav 的示例一样。

我的问题是我希望在选择 div 时显示一些内容，如果再次选择它或选择另一个 div，则内容被隐藏。

我当前的代码显示内容并在选择不同的 div 时将其隐藏，但是当第二次点击同一个 div 时所有内容都显示时就会出现问题。

我不太擅长 Jquery(因此我使用在堆栈溢出讨论中找到的代码)，我需要帮助才能完成这项工作？

这是我目前拥有的代码笔: https://codepen.io/anon/pen/orpGMj

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
	
button {
  color: #ecf0f1;
  background: none;
  width: 50px;
  height: 50px;
  border: 0;
  font-size: 1.5em;
  position: relative;
	float:right;
}

button span {
  position: absolute;
  transition: .3s;
  background: black;
  border-radius: 2px;
}

button2 span:first-of-type, button2 span:last-of-type {
  transform: rotate(45deg);
}

	.plus1{
		top: 25%;
	  	bottom: 25%;
	  	width: 10%;
	  	left: 45%;
	}
	.plus2{
		left: 25%;
  		right: 25%;
  		height: 10%;
  		top: 45%;
	}
	.x1{
		transform: rotate(45deg);
	}
	.x2{
		transform:rotate(-45deg)
	}
	
	.div {
	  height: 300px;
	  width: 30%;
	  border: solid 1px black;
	  display: inline-block
	}
	.active {
	  width: 75%;
	}
	.nonactive {
	  width: 10%;
	}
	.toggle{
		cursor:pointer;
	}

	.toggle2{
		content:"-";
		font-size:40px;
		float: right;
	    padding-top:0px;
		padding-right:10px;
	}
	.div,
	.active,
	.nonactive {
	  -webkit-transition: width 1s ease-in-out;
	  -moz-transition: width 1s ease-in-out;
	  -o-transition: width 1s ease-in-out;
	  transition: width 1s ease-in-out;
	}	
	.box1{
		background-color: aqua;
	}
	.box2{
		background-color: bisque;
	}
	.box3{
		background-color: darkseagreen;
	}
	.information{
		display:none;
	}
	.showinfo{
		position:absolute;
	}
</style>




<div class="container">
	<div class="div box1">
		<button class="toggle">
			<span class="plus1"></span><span class="plus2"></span>
		</button>
		<div class="content information">
			<p>This is the biggest test yet on div 1.</p>
		</div>
	</div>
	<div class="div box2">
		<button class="toggle">
			<span class="plus1"></span><span class="plus2"></span>
		</button>
		<div class="content information">
			<p>This is the biggest test yet on div 2.</p>
		</div>
	</div>
	<div class="div box3">
		<button class="toggle">
			<span class="plus1"></span><span class="plus2"></span>
		</button>
		<div class="content information">
			<p>This is the biggest test yet on div 3.</p>
		</div>
	</div>
</div>


<script>
$('.toggle').click(function() {	
  $(this)
    // get div 
    .parent()
    // remove nonactive class from clicked element
    .removeClass('nonactive')
    // toggle active class
    .toggleClass('active')	
    // get sibling divs
    .siblings()
    // remove active class from siblings
    .removeClass('active')
    // toggle nonactive class based on the clicked element 
    .toggleClass('nonactive', $(this).parent().is('.active'));
});
	
	//Toggles the Plus button to rotate -- not sure why this works??
	$('.toggle').click(function() {	
	  $(this)
		//finding the children of the button
		.children()
		// remove class for non toggle
		.removeClass('x2')
		//toggle rotation for button
		.toggleClass("x1")
		// get sibling divs
		.parent().parent().siblings().children().children()
		//removing the rotation
		.removeClass('x1')
		// toggle nonactive class based on the clicked element 
		.toggleClass('', $(this).parent().is('.active'));
	});
	
	//Toggles the Information to come out. -- doesn't work correctly
$('.toggle').click(function() {	
  $(this)
    // get div 
    .next()
    // remove nonactive class from clicked element
    .removeClass('information')
    // toggle active class
    .toggleClass('showinfo')	
    // get sibling divs
    .parent().siblings().children(".content")
    // remove active class from siblings
    .removeClass('showinfo')
    // toggle nonactive class based on the clicked element 
    .toggleClass('information', $(this).parent().is('.active'));
});

</script>

Answer 1

您的 jQuery 触发所有 .removeClass('nonactive') 导致所有内容显示

不应将此类用作显示内容的选择器。

我通过添加这个样式来修复它

.content {
    display: none;
}
.content.showinfo {
    display: block;
}

这是笔 https://codepen.io/somuch72/pen/JQMObR