Question

我正在向页面添加jQuery UI Accordion，并在页面加载说明时在firebug中出错

#accordion is not a function

这是jquery代码：

<script type="text/javascript">
$(document).ready(function() {
$("a.view-preview").fancybox({
'titleShow'     : false,
'transitionIn'  : 'elastic',
'transitionOut' : 'elastic'
});
$("#accordion").accordion({ header: "h3", collapsible: true, active: false });
$("a.show-categories").fancybox({
'titleShow'     : false,
'transitionIn'  : 'elastic',
'transitionOut' : 'elastic'
});
});
</script>

这是html代码：

<div id="accordion">
<div>
<h3><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>

以下是加载页面的标题：

<head>


<!-- meta -->   
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Rouviere Media - web design and development" />
<meta name="keywords" content="web design, development, expression engine, cms, forrest anderson, donna anderson" />
<meta name="robots" content="index, follow" />

<!-- title -->
<title>Expression Engine, Web Design and Development | Rouviere Media</title>

<meta name="viewport" content="width=device-width" />

<!-- css -->
<link rel="shortcut icon" href="http://ee.rouviere.com/_images/favicon.ico" />
<link rel="stylesheet" type="text/css" media="all" href="http://ee.rouviere.com/_css/rou_inside_styles.css"/>
<link rel="stylesheet" type="text/css" media="all" href="http://ee.rouviere.com/_css/web-custom/jquery-ui-1.8.10.custom.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="http://ee.rouviere.com/fancybox/jquery.fancybox-1.3.4.css"/>

<!--[if IE 7]>  <link href="http://ee.rouviere.com/_css/rou_ie7.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if IE 8]><link href="site_url}_css/rou_ie8.css" rel="stylesheet" type="text/css" /><![endif]-->

<!-- js -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ee.rouviere.com/_js/jquery-ui-1.8.10.min.js"></script>
<script type="text/javascript" src="http://ee.rouviere.com/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
    $("a.view-preview").fancybox({
        'titleShow'     : false,
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic'
    });
    $("#accordion").accordion({ header: "h3", collapsible: true, active: false });
    $("a.show-categories").fancybox({
        'titleShow'     : false,
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic'
    });
});

</script>       
</head>

我会在此感谢一些指导。感谢。

Answer 1

你有JQuery UI库和JQuery库lodad吗？如果没有，那么你应该确保框架和JQuery UI js文件都在你的标题中;

https://jqueryui.com/accordion/

请参阅源代码作为示例。

Answer 2

一个原因可能是你的application.js中没有正确包含javascripts（如果你使用的是rails 3）

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .

手风琴需要第3行加载。（第3行：// =需要jquery-ui）

Answer 3

最有可能的原因是你没有包含jquery.ui.widget.js依赖项（根据dependencies on the accordion page列表）。首先尝试包括它。您可以通过jQuery UI下载来完成此操作。确保在下载时，您已选择了小部件组件（在“核心”下）。

Answer 4

这个问题可能来自几件不同的事情：

您不包括jQuery UI库。
您将jQuery UI库包含在jQuery库
jQuery UI和jQuery库的路径可能不正确
您使用的是没有手风琴的自定义jQuery UI库

jQuery UI错误消息：#acordord不是函数

4 个答案: