:targetpsuedoclass 를 사용하는 다른 사람의 코드를 기반으로하는 순수한 CSS 축소 가능 div가 있습니다. 내가 설정하려는 것은 12 개 이상의 질문이있는 페이지이며 + 버튼을 클릭하면 답변 div가 아래로 확장됩니다. 많은 추가 CSS를 작성하지 않고이 페이지에서 여러 축소 div 요소를 만드는 방법을 알 수 없습니다. 누구든지 이것을 작성하는 방법에 대한 제안이 있으므로 CSS 코드가 최소화됩니까? (즉, 12 개 이상의 질문에 대해 고유 한 선택자를 입력 할 필요가 없습니다.)
이것은 JS를 허용하지 않는 wordpress.com 사이트에서 진행되고 있기 때문에 Javascript를 사용할 수 없습니다.
내 jfiddle은 다음과 같습니다. http://jsfiddle.net/dmarvs/94ukA/4/
<div class="FAQ">
<a href="#hide1" class="hide" id="hide1">+</a>
<a href="#show1" class="show" id="show1">-</a>
<div class="question"> Question Question Question Question Question Question Question Question Question Question Question? </div>
<div class="list">
<p>Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer </p>
</div>
</div>
/* source: http://www.ehow.com/how_12214447_make-collapsing-lists-java.html */
.FAQ {
vertical-align: top;
height:auto !important;
}
.list {
display:none;
height:auto;
margin:0;
float: left;
}
.show {
display: none;
}
.hide:target + .show {
display: inline;
}
.hide:target {
display: none;
}
.hide:target ~ .list {
display:inline;
}
/*style the (+) and (-) */
.hide, .show {
width: 30px;
height: 30px;
border-radius: 30px;
font-size: 20px;
color: #fff;
text-shadow: 0 1px 0 #666;
text-align: center;
text-decoration: none;
box-shadow: 1px 1px 2px #000;
background: #cccbbb;
opacity: .95;
margin-right: 0;
float: left;
margin-bottom: 25px;
}
.hide:hover, .show:hover {
color: #eee;
text-shadow: 0 0 1px #666;
text-decoration: none;
box-shadow: 0 0 4px #222 inset;
opacity: 1;
margin-bottom: 25px;
}
.list p{
height:auto;
margin:0;
}
.question {
float: left;
height: auto;
width: 90%;
line-height: 20px;
padding-left: 20px;
margin-bottom: 25px;
font-style: italic;
}
답변
지원하려는 브라우저 / 장치 또는 비 호환 브라우저를 위해 준비한 사항에 따라 <summary>및 <detail>태그 를 확인하고 싶을 수 있습니다 . 정확히이 목적을위한 것입니다. 축소 및 표시는 태그 정의 / 포맷의 일부이므로 CSS가 전혀 필요하지 않습니다.
여기 에 예제를 만들었습니다 .
<details>
<summary>This is what you want to show before expanding</summary>
<p>This is where you put the details that are shown once expanded</p>
</details>
브라우저 지원은 다양합니다. 최상의 결과를 얻으려면 웹킷을 사용해보십시오. 다른 브라우저는 기본적으로 모든 솔루션을 표시 할 수 있습니다. 위에서 설명한 숨김 / 표시 방법으로 대체 할 수 있습니다.
답변
<summary>및 사용<details>
<summary>및 <details>요소를 사용 하는 것이 가장 간단하지만 현재 IE가 지원하지 않으므로 브라우저 지원 을 참조하십시오 . 그래도 polyfill을 할 수 있습니다 (대부분 jQuery 기반). 지원되지 않는 브라우저는 단순히 확장 된 버전을 표시하므로 경우에 따라 허용 될 수 있습니다.
/* Optional styling */
summary::-webkit-details-marker {
color: blue;
}
summary:focus {
outline-style: none;
}<details>
<summary>Summary, caption, or legend for the content</summary>
Content goes here.
</details>요소 스타일 지정 방법 <details>(HTML5 Doctor) 도 참조하십시오 (조금 까다 로움).
순수 CSS3
:target선택은 꽤 좋은이 브라우저 지원을 하고는 확인하는 데 사용할 수있는 하나의 프레임 내에서 접을 수있는 요소.
.details,
.show,
.hide:target {
display: none;
}
.hide:target + .show,
.hide:target ~ .details {
display: block;
}<div>
<a id="hide1" href="#hide1" class="hide">+ Summary goes here</a>
<a id="show1" href="#show1" class="show">- Summary goes here</a>
<div class="details">
Content goes here.
</div>
</div>
<div>
<a id="hide2" href="#hide2" class="hide">+ Summary goes here</a>
<a id="show2" href="#show2" class="show">- Summary goes here</a>
<div class="details">
Content goes here.
</div>
</div>답변
@gbtimmon의 대답 은 훌륭하지만 너무 복잡합니다. 가능한 한 그의 코드를 단순화했습니다.
#answer,
#show,
#hide:target {
display: none;
}
#hide:target + #show,
#hide:target ~ #answer {
display: inherit;
}<a href="#hide" id="hide">Show</a>
<a href="#/" id="show">Hide</a>
<div id="answer"><p>Answer</p></div>답변
두 링크의 앵커 만 반복하면됩니다.
<a href="#hide2" class="hide" id="hide2">+</a>
<a href="#show2" class="show" id="show2">-</a>
이 jsfiddle http://jsfiddle.net/eJX8z/ 참조
또한 형식을 개선하기 위해 FAQ 호출에 약간의 여백을 추가했습니다.
답변
또는 CSS가 거의없는 매우 간단한 버전 🙂
<style>
.faq ul li {
display:block;
float:left;
padding:5px;
}
.faq ul li div {
display:none;
}
.faq ul li div:target {
display:block;
}
</style>
<div class="faq">
<ul>
<li><a href="#question1">Question 1</a>
<div id="question1">Answer 1 </div>
</li>
<li><a href="#question2">Question 2</a>
<div id="question2">Answer 2 </div>
</li>
<li><a href="#question3">Question 3</a>
<div id="question3">Answer 3 </div>
</li>
<li><a href="#question4">Question 4</a>
<div id="question4">Answer 4 </div>
</li>
<li><a href="#question5">Question 5</a>
<div id="question5">Answer 5 </div>
</li>
<li><a href="#question6">Question 6</a>
<div id="question6">Answer 6 </div>
</li>
</ul>
</div>
답변
