1
私はHTML、CSS、およびJavaScriptを使用して作成しているアコーディオンリストのコードを以下に示します。私はアコーデオンのリストの中に入れたら、なぜリンクがうまくいかないのか不思議です。私は何が間違っているのかわからない。何でも助けてくれる、歓声。 、アコーディオンリストのリンクはありません
var accordion = $('.accordion');
accordion.addEventListener("click",function(e) {
e.stopPropagation();
e.preventDefault();
...
}
あなたは.accordionTitleにそれをバインドするいずれかの場合：
(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) {
e.stopPropagation();
e.preventDefault();
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');
}
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);
}
}<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">
<a href="www.google.com" target="_blank">This is a link</a>
</dd>
<div class="bottombar">  </div>
</dl>
</div>
</div>