Question

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

我有3个加号图标，这些图标在被选中以显示x时会旋转，然后如果再次选择它，或者如果选择了另一个div，则会旋转回加号。单击时，三个主要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

创建3个Div，可在单击时扩展并显示内容

1 个答案: