Question

我是初学者，我想让this Responsive Animated Accordion在我的网站上工作，但似乎我做错了。

我基本上复制/粘贴了html，CSS和js文件，并进入了我刚添加的html文件：

<head>
<link rel="stylesheet" type="text/css" href="accordion.css">
</head>
<script src="accordion.js"></script>

从浏览器检查看来js文件似乎已加载，但是它确定无法正常工作，还有什么我应该做的吗？

完整的html文件：

<head>
<link rel="stylesheet" type="text/css" href="accordion.css">
</head>
<script src="accordion.js"></script>
<div class="container">
          <h1>CSS Responsive Animated Accordion</h1>
          <div class="accordion">
            <dl>
              <dt>
                <a href="#accordion1" aria-expanded="false" aria-controls="accordion1" class="accordionTitle js-accordionTrigger">First Accordion heading</a>
              </dt>
              <dd class="accordionItem is-collapsed" id="accordion1" aria-hidden="true">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris. </p>
                <p>Aliquam dapibus, ante quis fringilla feugiat, mauris risus condimentum massa, at elementum libero quam ac ligula. Pellentesque at rhoncus dolor. Duis porttitor nibh ut lobortis aliquam. Nullam eu dolor venenatis mauris placerat tristique eget id dolor. Quisque blandit adipiscing erat vitae dapibus. Nulla aliquam magna nec elementum tincidunt.</p>
              </dd>
              <dt>
                <a href="#accordion2" aria-expanded="false" aria-controls="accordion2" class="accordionTitle js-accordionTrigger">
                  Second Accordion heading</a>
              </dt>
              <dd class="accordionItem is-collapsed" id="accordion2" aria-hidden="true">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris. </p>
                <p>Aliquam dapibus, ante quis fringilla feugiat, mauris risus condimentum massa, at elementum libero quam ac ligula. Pellentesque at rhoncus dolor. Duis porttitor nibh ut lobortis aliquam. Nullam eu dolor venenatis mauris placerat tristique eget id dolor. Quisque blandit adipiscing erat vitae dapibus. Nulla aliquam magna nec elementum tincidunt.</p>
              </dd>
              <dt>
                <a href="#accordion3" aria-expanded="false" aria-controls="accordion3" class="accordionTitle js-accordionTrigger">
                  Third Accordion heading
                </a>
              </dt>
              <dd class="accordionItem is-collapsed" id="accordion3" aria-hidden="true">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris. </p>
                <p>Aliquam dapibus, ante quis fringilla feugiat, mauris risus condimentum massa, at elementum libero quam ac ligula. Pellentesque at rhoncus dolor. Duis porttitor nibh ut lobortis aliquam. Nullam eu dolor venenatis mauris placerat tristique eget id dolor. Quisque blandit adipiscing erat vitae dapibus. Nulla aliquam magna nec elementum tincidunt.</p>
              </dd>
            </dl>
          </div>
        </div>

完整的js文件

//uses classList, setAttribute, and querySelectorAll
//if you want this to work in IE8/9 youll need to polyfill these
(function(){
    var d = document,
    accordionToggles = d.querySelectorAll('.js-accordionTrigger'),
    setAria,
    setAccordionAria,
    switchAccordion,
  touchSupported = ('ontouchstart' in window),
  pointerSupported = ('pointerdown' in window);

  skipClickDelay = function(e){
    e.preventDefault();
    e.target.click();
  }

        setAriaAttr = function(el, ariaType, newProperty){
        el.setAttribute(ariaType, newProperty);
    };
    setAccordionAria = function(el1, el2, expanded){
        switch(expanded) {
      case "true":
        setAriaAttr(el1, 'aria-expanded', 'true');
        setAriaAttr(el2, 'aria-hidden', 'false');
        break;
      case "false":
        setAriaAttr(el1, 'aria-expanded', 'false');
        setAriaAttr(el2, 'aria-hidden', 'true');
        break;
      default:
                break;
        }
    };
//function
switchAccordion = function(e) {
    e.preventDefault();
    var thisAnswer = e.target.parentNode.nextElementSibling;
    var thisQuestion = e.target;
    if(thisAnswer.classList.contains('is-collapsed')) {
        setAccordionAria(thisQuestion, thisAnswer, 'true');
    } else {
        setAccordionAria(thisQuestion, thisAnswer, 'false');
    }
    thisQuestion.classList.toggle('is-collapsed');
    thisQuestion.classList.toggle('is-expanded');
        thisAnswer.classList.toggle('is-collapsed');
        thisAnswer.classList.toggle('is-expanded');

    thisAnswer.classList.toggle('animateIn');
    };
    for (var i=0,len=accordionToggles.length; i<len; i++) {
        if(touchSupported) {
      accordionToggles[i].addEventListener('touchstart', skipClickDelay, false);
    }
    if(pointerSupported){
      accordionToggles[i].addEventListener('pointerdown', skipClickDelay, false);
    }
    accordionToggles[i].addEventListener('click', switchAccordion, false);
  }
})();

完整的CSS文件

//updated ver
* {
  box-sizing:border-box;
}
@import url(http://fonts.googleapis.com/css?family=Lato:400,700);
body { 

  font-family:'Lato';
}
h1 {
  font-size:2em;
  padding:2em;
  text-align:center;
}
.accordion {
    dl {
        border:1px solid #ddd;
         &:after {
            content: "";
            display:block;
            height:1em;
            width:100%;
            background-color:darken(#38cc70, 10%);
        }
    }
    dt {
        >a {
          text-align:center;
          font-weight:700; 
          padding:2em;
          display:block;
          text-decoration:none;
          color:#fff;
          transition:background-color 0.5s ease-in-out;
        }
      }
    dd {
        background-color:#eee;
        font-size:1em;
        line-height:1.5em;
        >p {
          padding:1em 2em 1em 2em;
        }
    }
}
.accordion {
    position:relative;
    background-color:#eee;
}
.container {
  max-width:960px;
  margin:0 auto;
  padding:2em 0 2em 0;
}
.accordionTitle {
 background-color:#38cc70; 
  border-bottom:1px solid darken(#38cc70, 5%);
  &:before {
   content: "+";
   font-size:1.5em;
   line-height:0.5em;
   float:left; 
   transition: transform 0.3s ease-in-out;
  }
  &:hover {
    background-color:darken(#38cc70, 10%);
  }
}
.accordionTitleActive, 
.accordionTitle.is-expanded {
   background-color:darken(#38cc70, 10%);
    &:before {

      transform:rotate(-225deg);
    }
}
.accordionItem {
    height:auto;
    overflow:hidden; 
    //SHAME: magic number to allow the accordion to animate

     max-height:50em;
    transition:max-height 1s;   


    @media screen and (min-width:48em) {
         max-height:15em;
        transition:max-height 0.5s

    }


}
.accordionItemCollapsed, 
.accordionItem.is-collapsed {
    max-height:0;
}
.animateIn {
     animation: accordionIn 0.65s normal ease-in-out both 1; 
}
.animateOut {
     animation: accordionOut 0.75s alternate ease-in-out both 1;
}
@keyframes accordionIn {
  0% {
    opacity: 0;
    transform:scale(0.8);
  }
  100% {
    opacity:1;
    transform:scale(1);
  }
}

@keyframes accordionOut {
    0% {
       opacity: 1;
       transform:scale(1);
     }
     100% {
          opacity:0;
          transform:scale(0.8);
       }
}

Answer 1

您的代码存在两个问题。

您正在尝试使用Sass而不是普通的旧CSS。这适用于codepen示例，因为codepen将Sass编译为css。如果你想使用Sass，你需要在浏览器中打开时将其编译为css，因为它不了解Sass。您可以使用最适合您工作流程的工具，或在线编译，例如在此处http://sassmeister.com。有关sass的更多信息，请参阅http://sass-lang.com。如果你是初学者，我会坚持使用常规旧css一段时间后再开始使用像Sass这样的更高级的工具。
您在加载标记之前包含了javascript文件。在容器的结束div之后移动<script src="accordion.js"></script>应该可以解决问题。您可以在此处详细了解此信息 - pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

这是手风琴的一个有效的jsbin，应该很容易在你的机器上本地复制。 http://jsbin.com/laqehirobi/1/edit?html,css,js,output

此外，您的标记无效，请考虑使用http://validator.w3.org/check等工具进行验证 - 您需要在头部添加html和正文元素以及标题标记。

响应式动画手风琴不起作用

1 个答案: