0
내가 만드는 아코디언 목록에 아래 코드가 있습니다. 어떤 이유로, 텍스트 속성을 제목에있는 4 개 항목에 CSS 속성에 추가하면 내용이 변경되지 않습니다. 나는 센터에서 4 개월 활동을하고 싶지만 텍스트 정렬은 효과가 없습니다. 내가 뭘 잘못했는지 모르겠다. 누구든지 그 문제를 볼 수 있습니까? 건배. 클래스 "DD"에아코디언 목록 텍스트 정렬이 작동하지 않습니다.
(function(window) {
'use strict';
function classReg(className) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
var hasClass, addClass, removeClass;
if ('classList' in document.documentElement) {
hasClass = function(elem, c) {
return elem.classList.contains(c);
};
addClass = function(elem, c) {
elem.classList.add(c);
};
removeClass = function(elem, c) {
elem.classList.remove(c);
};
}
else {
hasClass = function(elem, c) {
return classReg(c).test(elem.className);
};
addClass = function(elem, c) {
if (!hasClass(elem, c)) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function(elem, c) {
elem.className = elem.className.replace(classReg(c), ' ');
};
}
function toggleClass(elem, c) {
var fn = hasClass(elem, c) ? removeClass : addClass;
fn(elem, c);
}
var classie = {
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
if (typeof define === 'function' && define.amd) {
define(classie);
} else {
window.classie = classie;
}
})(window);
var $ = function(selector){
return document.querySelector(selector);
}
var accordion = $('.accordion');
accordion.addEventListener("click",function(e) {
if(e.target && e.target.nodeName == "A") {
var classes = e.target.className.split(" ");
if(classes) {
for(var x = 0; x < classes.length; x++) {
if(classes[x] == "accordionTitle") {
var title = e.target;
var content = e.target.parentNode.nextElementSibling;
classie.toggle(title, 'accordionTitleActive');
if(classie.has(content, 'accordionItemCollapsed')) {
if(classie.has(content, 'animateOut')){
classie.remove(content, 'animateOut');
}
classie.add(content, 'animateIn');
}else{
classie.remove(content, 'animateIn');
classie.add(content, 'animateOut');
}
e.stopPropagation();
e.preventDefault();
classie.toggle(content, 'accordionItemCollapsed');
}
}
}
}
});.bold {
font-weight:bold;
color: #005bab;
}
.accordion dl{
}
.bottombar{
content: "";
display:block;
height:1em;
width:100%;
background-color:#00688B;
}
.accordion dt > a {
text-align: center;
font-weight: 700;
padding: 2em;
display: block;
text-decoration: none;
color: #005bab;
-webkit-transition: background-color 0.5s ease-in-out;
}
.accordion dd {
background-color: #f4f8fc;
color:#30353d;
font-size: 1em;
line-height: 1.5em;
}
.accordion dd > p {
padding: 1em 2em 1em 2em;
}
.accordion {
position: relative;
background-color: #e1ecf7;
}
.container {
max-width: 960px;
margin: 0 auto;
}
.accordionTitle {
background-color: #e2ecf6;
font-size:14px;
border-bottom: 1px solid #F2F2F2;
}
.accordionTitle:before {
content: "+";
font-size: 1.1em;
color: #005bab;
line-height: 0.5em;
float: left;
-moz-transition: -moz-transform 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
}
.accordionTitle:hover {
background-color: #e8f0f7;
}
.accordionTitleActive {
background-color:#e8f0f7;
}
.accordionTitleActive:before {
-webkit-transform: rotate(-225deg);
-moz-transform: rotate(-225deg);
transform: rotate(-225deg);
}
.accordionItem {
height: auto;
overflow: hidden;
padding-left:15px;
padding-right:15px;
}
@media all {
.accordionItem {
max-height: 100em;
-moz-transition: max-height 1.5s;
-o-transition: max-height 1.5s;
-webkit-transition: max-height 1.5s;
transition: max-height 1.5s;
}
}
@media screen and (min-width: 48em) {
.accordionItem {
max-height: 50em;
-moz-transition: max-height 0.5s;
-o-transition: max-height 0.5s;
-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;
}
}
.accordionItemCollapsed {
max-height: 0;
}
.animateIn {
-webkit-animation-name: accordionIn;
-webkit-animation-duration: 0.65s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 0s;
-moz-animation-name: normal;
-moz-animation-duration: 0.65s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;
-moz-animation-fill-mode: both;
-moz-animation-delay: 0s;
animation-name: accordionIn;
animation-duration: 0.65s;
animation-iteration-count: 1;
animation-direction: normal;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
animation-delay: 0s;
}
.animateOut {
-webkit-animation-name: accordionOut;
-webkit-animation-duration: 0.75s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 0s;
-moz-animation-name: accordionOut;
-moz-animation-duration: 0.75s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;
-moz-animation-fill-mode: both;
-moz-animation-delay: 0s;
animation-name: accordionOut;
animation-duration: 0.75s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
animation-delay: 0s;
}
@-webkit-keyframes accordionIn {
0% {
opacity: 0;
-webkit-transform: scale(0.8);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
}
}
@-moz-keyframes accordionIn {
0% {
opacity: 0;
-moz-transform: scale(0.8);
}
100% {
opacity: 1;
-moz-transform: scale(1);
}
}
@keyframes accordionIn {
0% {
opacity: 0;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@-webkit-keyframes accordionOut {
0% {
opacity: 1;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(0.8);
}
}
@-moz-keyframes accordionOut {
0% {
opacity: 1;
-moz-transform: scale(1);
}
100% {
opacity: 0;
-moz-transform: scale(0.8);
}
}
@keyframes accordionOut {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.8);
}
}
.read-more-state {
display: none;
}
.read-more-target {
opacity: 0;
max-height: 0;
font-size: 0;
transition: .25s ease;
}
.read-more-state:checked ~ .read-more-wrap .read-more-target {
opacity: 1;
font-size: inherit;
max-height: 999em;
}
.read-more-state ~ .read-more-trigger:before {
content: 'February Activities';
text-align:center;
font-weight: bold;
color: #005bab;
}
.read-more-state:checked ~ .read-more-trigger:before {
content: 'February Activities';
color:#555555;
text-decoration: underline;
}
.read-more-trigger {
cursor: pointer;
}
/*Read More Box 2*/
.read-more-state2 {
display: none;
}
.read-more-target2 {
opacity: 0;
max-height: 0;
font-size: 0;
transition: .25s ease;
}
.read-more-state2:checked ~ .read-more-wrap2 .read-more-target2 {
opacity: 1;
font-size: inherit;
max-height: 999em;
}
.read-more-state2 ~ .read-more-trigger2:before {
content: 'March Activities';
font-weight: bold;
color: #005bab;
}
.read-more-state2:checked ~ .read-more-trigger2:before {
content: 'March Activities';
color:#555555;
text-decoration: underline;
}
.read-more-trigger2 {
cursor: pointer;
}
/*Read More Box 3*/
.read-more-state3 {
display: none;
}
.read-more-target3 {
opacity: 0;
max-height: 0;
font-size: 0;
transition: .25s ease;
}
.read-more-state3:checked ~ .read-more-wrap3 .read-more-target3 {
opacity: 1;
font-size: inherit;
max-height: 999em;
}
.read-more-state3 ~ .read-more-trigger3:before {
content: 'April Activities';
font-weight: bold;
color: #005bab;
}
.read-more-state3:checked ~ .read-more-trigger3:before {
content: 'April Activities';
color:#555555;
text-decoration: underline;
}
.read-more-trigger3 {
cursor: pointer;
}
/*Read More Box 4*/
.read-more-state4 {
display: none;
}
.read-more-target4 {
opacity: 0;
max-height: 0;
font-size: 0;
transition: .25s ease;
}
.read-more-state4:checked ~ .read-more-wrap4 .read-more-target4 {
opacity: 1;
font-size: inherit;
max-height: 999em;
}
.read-more-state4 ~ .read-more-trigger4:before {
content: 'May Activities';
font-weight: bold;
color: #005bab;
}
.read-more-state4:checked ~ .read-more-trigger4:before {
content: 'May Activities';
color:#555555;
text-decoration: underline;
}
.read-more-trigger4 {
cursor: pointer;
}
/*Read More Box 1 -two*/
.read-more-state-two {
display: none;
}
.read-more-target-two {
opacity: 0;
max-height: 0;
font-size: 0;
transition: .25s ease;
}
.read-more-state-two:checked ~ .read-more-wrap-two .read-more-target-two {
opacity: 1;
font-size: inherit;
max-height: 999em;
}
.read-more-state-two ~ .read-more-trigger-two:before {
content: 'February Activities';
font-weight: bold;
color: #005bab;
}
.read-more-state-two:checked ~ .read-more-trigger-two:before {
content: 'February Activities';
color:#555555;
text-decoration: underline;
}
.read-more-trigger-two {
cursor: pointer;
}
/*Read More Box 2 -two*/
.read-more-state2-two {
display: none;
}
.read-more-target2-two {
opacity: 0;
max-height: 0;
font-size: 0;
transition: .25s ease;
}
.read-more-state2-two:checked ~ .read-more-wrap2-two .read-more-target2-two {
opacity: 1;
font-size: inherit;
max-height: 999em;
}
.read-more-state2-two ~ .read-more-trigger2-two:before {
content: 'March Activities';
font-weight: bold;
color: #005bab;
}
.read-more-state2-two:checked ~ .read-more-trigger2-two:before {
content: 'March Activities';
color:#555555;
text-decoration: underline;
}
.read-more-trigger2-two {
cursor: pointer;
}
/*Read More Box 3 -two*/
.read-more-state3-two {
display: none;
}
.read-more-target3-two {
opacity: 0;
max-height: 0;
font-size: 0;
transition: .25s ease;
}
.read-more-state3-two:checked ~ .read-more-wrap3-two .read-more-target3-two {
opacity: 1;
font-size: inherit;
max-height: 999em;
}
.read-more-state3-two ~ .read-more-trigger3-two:before {
content: 'April Activities';
font-weight: bold;
color: #005bab;
}
.read-more-state3-two:checked ~ .read-more-trigger3-two:before {
content: 'April Activities';
color:#555555;
text-decoration: underline;
}
.read-more-trigger3-two {
cursor: pointer;
}
/*Read More Box 4 -two*/
.read-more-state4-two {
display: none;
}
.read-more-target4-two {
opacity: 0;
max-height: 0;
font-size: 0;
transition: .25s ease;
}
.read-more-state4-two:checked ~ .read-more-wrap4-two .read-more-target4-two {
opacity: 1;
font-size: inherit;
max-height: 999em;
}
.read-more-state4-two ~ .read-more-trigger4-two:before {
content: 'May Activities';
font-weight: bold;
color: #005bab;
}
.read-more-state4-two:checked ~ .read-more-trigger4-two:before {
content: 'May Activities';
color:#555555;
text-decoration: underline;
}
.read-more-trigger4-two {
cursor: pointer;
}<div class="container">
<div class="accordion">
<dl>
<dt>
<a class="accordionTitle" href="#">
<span style="color: #005bab;">Heading One</span></a></dt>
<dd class="accordionItem accordionItemCollapsed">
<div>
<br/>
<input class="read-more-state" id="post-1" type="checkbox"/>
<label class="read-more-trigger" for="post-1"></label>
<div class="read-more-wrap">
<div class="read-more-target">
<br/>
<p class="p">
<span class="bold">Feb 28-Mar 10, 2017.</span><br/>feb</p>
<br/>
</div>
</div>
</div>
<div>
<input class="read-more-state2" id="post-2" type="checkbox"/>
<label class="read-more-trigger2" for="post-2"></label>
<div class="read-more-wrap2">
<div class="read-more-target2">
<br/>
<p class="p">
<span class="bold">W/C March 13</span><br/>march</p>
<br/>
</div>
</div>
</div>
<div>
<input class="read-more-state3" id="post-3" type="checkbox"/>
<label class="read-more-trigger3" for="post-3"></label>
<div class="read-more-wrap3">
<div class="read-more-target3">
<br/>
<p class="p">
<span class="bold">Apr 10, 2017</span><br/>April</p>
<br/>
</div>
</div>
</div>
<div>
<input class="read-more-state4" id="post-4" type="checkbox"/>
<label class="read-more-trigger4" for="post-4"></label>
<div class="read-more-wrap4">
<div class="read-more-target4">
<br/>
<p class="p">
<span class="bold">May 3-4, 2017</span><br/>May</p>
<br/>
</div>
</div>
</div>
</dd>
<div class="bottombar">  </div>
</dl>
</div>
</div>
감사합니다 youuuuuuu –