我如何在我的網站上有多個手風琴下拉菜單。 HTML，CSS JavaScript

Question

我遇到了一個問題，我無法獲取多個手風琴菜單在我的網頁上工作。當我嘗試複製粘貼代碼時，新的手風琴菜單就在那裏，但是當我點擊第一個欄時，它只是將我帶到網頁的頂部。

這裏的HTML代碼：

<div class="container"> 
     <h1>Accordion Dropdown</h1> 
     <div class="accordion"> 
     <dl> 
      <dt><a class="accordionTitle" href="#">Test Accordion 1</a></dt> 
      <dd class="accordionItem accordionItemCollapsed"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. </p> 
      </dd> 
      <dt><a href="#" class="accordionTitle">Test Simple Flat UI CSS Accordion 2</a></dt> 
      <dd class="accordionItem accordionItemCollapsed"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> 
      </dd> 
      <dt><a href="#" class="accordionTitle">Test Simple Flat UI CSS Accordion 3</a></dt> 
      <dd class="accordionItem accordionItemCollapsed"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. </p> 
      </dd> 
     </dl> 
     </div> 

這裏是CSS：

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

body { 
    font-family: 'Lato'; 
} 

h1 { 
    font-size: 2em; 
    padding: 2em; 
    text-align: center; 
} 

.accordion dl { 
} 

.accordion dt > a { 
    text-align: center; 
    font-weight: 700; 
    padding: 2em; 
    display: block; 
    text-decoration: none; 
    color: #fff; 
    -webkit-transition: background-color 0.5s ease-in-out; 
} 
.accordion dd { 
    background-color: #1abc9c; 
    color:#fafafa; 
    font-size: 1em; 
    line-height: 1.5em; 
} 
.accordion dd > p { 
    padding: 1em 2em 1em 2em; 
} 

.accordion { 
    position: relative; 
    background-color: #16a085; 
} 

.container { 
    max-width: 960px; 
    margin: 0 auto; 
    padding: 2em 0 2em 0; 
} 

.accordionTitle { 
    background-color: #22313F; 
    border-bottom: 1px solid #2c3e50; 
} 
.accordionTitle:before { 
    content: "+"; 
    font-size: 1.5em; 
    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: #2c3e50; 
} 

.accordionTitleActive { 
    background-color:#34495e; 
} 
.accordionTitleActive:before { 
    -webkit-transform: rotate(-225deg); 
    -moz-transform: rotate(-225deg); 
    transform: rotate(-225deg); 
} 

.accordionItem { 
    height: auto; 
    overflow: hidden; 
} 
@media all { 
    .accordionItem { 
    max-height: 50em; 
    -moz-transition: max-height 1s; 
    -o-transition: max-height 1s; 
    -webkit-transition: max-height 1s; 
    transition: max-height 1s; 
    } 
} 
@media screen and (min-width: 48em) { 
    .accordionItem { 
    max-height: 15em; 
    -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); 
    } 
} 

最後，這是JS/jQuery的：

<script> 
(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');  
     } 
     } 
    } 
    } 
}); 
</script> 

Answer 1

嗯，我不要不清楚你的問題，但是當我複製的代碼與一些小的修補程序的jsfiddle：

` <div class="container"> 
    ... 
    </div>` 

一切似乎正常工作http://jsfiddle.net/xa5vft3g/