Question

我有以下用纯HTML和CSS编写的可折叠面板：

           <style>
                .collapse-panel {
                    display: block;
                    vertical-align: top;
                    height: auto !important;
                }

                .collapse-panel a {
                    font-family: "Lucida Console", Monaco, monospace;
                    font-size: 16pt;
                    font-weight: bolder;
                    text-decoration: none;
                }

                .collapse-panel-content {
                    display: none;
                    height: auto;
                }

                .show {
                    display: none;
                }

                .hide:target + .show {
                    display: inline;
                }

                .hide:target {
                    display: none;
                }

                .hide:target ~ .collapse-panel-content {
                    display: inline;
                }
            </style>
        <div>
            <div>
                <div class="collapse-panel">
                    <a href="#hide1" class="hide" id="hide1">+</a>
                    <a href="#show1" class="show" id="show1">-</a>
                    <span>Details A</span>
                    <div class="collapse-panel-content">
                        <div>Some details</div>
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div>
                <div class="collapse-panel">
                    <a href="#hide2" class="hide" id="hide2">+</a>
                    <a href="#show2" class="show" id="show2">-</a>
                    <span>Details B</span>
                    <div class="collapse-panel-content">
                        <div>Some other details</div>
                    </div>
                </div>
            </div>
        </div>

如何修改代码，以便在打开其他可折叠面板时不关闭？

Answer 1

我认为你不能使用:target。

来自w3schools：

：目标选择器可用于设置当前活动目标元素的样式。

这正是你在做的事情。现在，您能想到一种方法一次拥有多个:active元素吗？因为我不知道。

但这并不意味着单靠CSS就无法实现这一点。你只需要有创意。使用能够本机存储当前元素状态的元素，同时将其暴露给CSS选择器。例如，复选框：

[id^="collapseCheck-"]{
  display: none;
}
label[for^="collapseCheck-"] {
  display: block;
}
label[for^="collapseCheck-"]:before {
  content: "+";
  width: 1rem;
  text-align: center;
  display: inline-block;
}

[id^="collapsePanel-"] {
  display: none;
  padding: 1rem;
}

#collapseCheck-1:checked ~ label[for="collapseCheck-1"]:before {content: "-"}
#collapseCheck-2:checked ~ label[for="collapseCheck-2"]:before {content: "-"}
#collapseCheck-3:checked ~ label[for="collapseCheck-3"]:before {content: "-"}
/*...*/

#collapseCheck-1:checked ~ #collapsePanel-1 {display: block;}
#collapseCheck-2:checked ~ #collapsePanel-2 {display: block;}
#collapseCheck-3:checked ~ #collapsePanel-3 {display: block;}
/*...*/

<input type="checkbox" id="collapseCheck-1">
<input type="checkbox" id="collapseCheck-2">
<input type="checkbox" id="collapseCheck-3">
<!-- ... -->


<label for="collapseCheck-1">Details A</label>
  <div id="collapsePanel-1">
    <div>Some details</div>
  </div>

<label for="collapseCheck-2">Details B</label>
  <div id="collapsePanel-2">
    <div>Some details</div>
  </div>

<label for="collapseCheck-3">Details C</label>
  <div id="collapsePanel-3">
    <div>Some details</div>
  </div>

<!-- ... -->

如果元素是动态的，您可以使用服务器端的foreach生成所需的CSS选择器列表。这里的限制是所有的控件复选框都需要放在与项目列表相同的级别（或者你需要调整选择器），它们需要放在你的元素之前（CSS只是向前看，从不后面）。

通过将控件type的{{1}}切换为共享相同<input>属性的radio，可以轻松切换此解决方案以“关闭所有其他容器”。

请注意这是一个概念证明。为了使其在生产级环境中可用，还应该向其添加aria attributes，以便所有设备都可以访问和使用它，而不仅仅是屏幕类型。

Answer 2

您可以使用代码details和summary轻松完成此操作。但在你进一步发展之前，你应该知道目前浏览器IE，Edge，Opera不支持这些元素（Mozzila来自版本49）。请检查此链接：http://caniuse.com/#feat=details

<details>标记可用于创建交互式窗口小部件   用户可以打开和关闭。任何类型的内容都可以放在里面    标签

<summary>标记定义元素的可见标题。   可以单击标题以查看/隐藏详细信息。

您现在的代码：

summary::-webkit-details-marker {
  display: none
}

summary:after {	  
  float: left; 	
  width: 20px;
  content: "+";
}

details[open] summary:after {
  content: "-";
}

<article>
  <details>
    <summary>details A</summary>        		      			
    <span>Some content</span> 		        
  </details>
</article>

<article>
  <details>
    <summary>details B</summary>       			
    <span>Some other content</span>
  </details>
</article>

Answer 3

选中后，您可以通过输入type =“checkbox”执行此操作。这适用于所有浏览器。

.collapse-panel{
			border: 1px solid #ccc;
			list-style-type: none;
			padding-left: 0px;
			font-family: "Arial";
		}
		.collapse-panel li{
			position: relative;
			margin-bottom: 1px;
		}
		.collapse-panel li:last-child{margin-bottom: 0px;}
		.collapse-panel li label{
			padding: 7px 7px 7px 32px;
			background: #eee;
			display: block;
		}
		.collapse-panel li label:hover{
			background: #ddd;
		}
		.collapse-panel li input{
			position: absolute;
			top: 0px;
			visibility: hidden;
		}
		.collapse-panel li span{
			position: absolute;
			width: 15px;
			height: 15px;
			border:1px solid #999;
			border-radius: 50%;
			z-index: 2;
			top: 9px;
			left: 7px;
		}
		.collapse-panel li span:before{
			content: '+';
			position: absolute;
			top: -1px;
			left: 3px;
			line-height: 15px;
			font-size: 15px;
			color: green;
			font-weight: bold;
		}
		.collapse-panel li p{
			padding: 7px;
			font-size: 14px;
			color: #555;
			margin: 0px;
			display: none;
		}
		.collapse-panel li input:checked ~ p{
			display: block;
		}
		.collapse-panel li input:checked ~ span:before{
			content: '-';
			position: absolute;
			top: -2px;
			left: 5px;
			color: red;
		}

<ul class="collapse-panel">
	<li>
		<label for="col1">Details A</label>
		<input type="checkbox" name="" id="col1"><span></span>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</p>
	</li>
	<li>
		<label for="col2">Details B</label>
		<input type="checkbox" name="" id="col2"><span></span>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</p>
	</li>
	<li>
		<label for="col3">Details C</label>
		<input type="checkbox" name="" id="col3"><span></span>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</p>
	</li>
	<li>
		<label for="col4">Details D</label>
		<input type="checkbox" name="" id="col4"><span></span>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</p>
	</li>
</ul>

如何打开纯HTML-＆amp; -CSS可折叠面板时打开另一个面板？

3 个答案: