Question

我一直想尝试手风琴对mootools的影响，但是我无法让它工作，就像js根本没有加载

这是HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
 <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title>BarDiJan - We Deliver</title> 
    <link rel="stylesheet" href="/stylesheets/reset.css" type="text/css" /> 
    <link rel="stylesheet" href="/stylesheets/style.css" type="text/css" /> 
    <script type="text/javascript" src="/javascripts/mootools-core-1.3-accordion.js"></script> 
    <script type="text/javascript" src="/javascripts/mootools-more.js"></script> 
    <script type="text/javascript" src="/javascripts/application.js"></script> 
 </head> 

<body>
    <div class="container"> 
    <div id="accordion"> 
  <h3 class="toggler">What we Do</h3> 
  <div class="element"> 
    <p>We are people who deliver professional quality identity to you, we have wide range of support.
    </p> 
  </div> 
  <h3 class="toggler">What we Did</h3> 
  <div class="element"> 
    <p>Under Construction</p> 
  </div> 
  <h3 class="toggler">What we Offer</h3> 
  <div class=""> 
    <ul> 
    <li>Web Design</li> 
    <li>Identity</li> 
    </ul> 
  </div> 
</div> 


    </div> 

  </body> 
</html>

这是application.js代码

windows.addEvent('domready', function() {

var accordion = new Accordion($$('h3.toggler'),$$('div.element'), {
    display: 2,
    opacity: false,
    alwaysHide: true,
    onActive: function(toggler) { toggler.setStyle('color', '#929292'); },
    onBackground: function(toggler) { toggler.setStyle('color', '#000000'); }
  });
});

我做错了什么吗？如果重要的话，我也会使用sinatra。

还要感谢你的时间。。

Answer 1

您忘了将element类添加到最后一个元素。

这是一个有效的jsfiddle：http://jsfiddle.net/arian/YqNuh/

Answer 2

windows.addEvent('domready', function() {...

你弄错了，窗户，不是窗户;-) 所以：

window.addEvent('domready', function() {...

mootools手风琴不工作

2 个答案: