帮助JQuery手风琴?

时间:2010-10-07 20:01:39

标签: jquery accordion

将JQuery手风琴放入网站时遇到了一些麻烦。我觉得我做的一切都是正确的,但它运作不正常。我把网站放了,手风琴中有一些简单的Lorem Ipsum文字。如果有人可以提供帮助,我们将不胜感激。这是链接:http://www.catanesedesign.com/test/events.html。我无法在此网站上使代码清晰易读,但您可以在链接中看到源代码。底部没有内容的div,但这只是因为我还没有完成页面,这些不应该影响手风琴。

提前感谢您的帮助。

2 个答案:

答案 0 :(得分:2)

首先,您的jQuery UI css文件似乎存在问题。它说404 - 没找到。

答案 1 :(得分:0)

我拿出了lavalamp的东西并使用了一些其他的jquery文件并让它工作:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Alliance for New Music Theater</title> 
<link href="css.css" rel="stylesheet" type="text/css" /> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript"> 
    $(function() {
        $( "#accordion2" ).accordion();
    });
    </script> 
    <link href="jquery-ui-1.8.5.custom.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 
<div id="container" align="center"> 
<div id="header"> 
<img src="header.jpg" width="800" height="100" alt="curtains" /> 
</div> 
<div id="navbar"> 
<ul class="lavaLamp"> 
            <li><a href="#">Home</a></li> 
            <li><a href="#">Featured Work</a></li> 
            <li><a href="#">Featured Artist</a></li> 
            <li><a href="#">Members</a></li> 
            <li><a href="#">Events</a></li> 
        </ul> 
</div> 
<div id="row1">
<div id="accordion2"> 
    <h3><a href="#">Section 1</a></h3> 
    <div> 
        <p> 
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
        </p> 
    </div> 
    <h3><a href="#">Section 2</a></h3> 
    <div> 
        <p> 
        Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
        purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
        velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
        suscipit faucibus urna.
        </p> 
    </div> 
    <h3><a href="#">Section 3</a></h3> 
    <div> 
        <p> 
        Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
        Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
        ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
        lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
        </p> 
    </div> 
    <h3><a href="#">Section 4</a></h3> 
    <div> 
        <p> 
        Cras dictum. Pellentesque habitant morbi tristique senectus et netus
        et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
        faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
        mauris vel est.
        </p> 
    </div> 
</div> 
</div> 
</div> 
</div> 
</body> 
</html>