javascript - JQuery UI 某些函数错误 TypeError : $(. ..).accordion 不是函数

Question

我尝试跟随 stackoverflow 中的另一个询问线程，但没有任何结果，我收到错误 TypeError: $(...).accordion 在使用 Accordion 函数时不是一个函数，但对于其他函数 JQuery UI 如“effect”，其工作良好。

这是我的代码

<h3>Our Product</h3>
<div id="accordion">
  <div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
  </div>
  <h3>Section 2</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>Section 3</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>
    <ul>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </div>
</div>
</div>
</div>

在我的 head.php 文件中，jquery 和 jquery ui 都加载成功

<title><?php echo $title;?> | Mitra Dekor</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<link rel="stylesheet" href="<?php echo base_url('assets/css');?>/bootstrap.css" type="text/css">
<link rel="stylesheet" href="<?php echo base_url('assets/css');?>/font-awesome.css" type="text/css">
<link rel="stylesheet" href="<?php echo base_url('assets/css');?>/owl_003.css" type="text/css">
<link rel="stylesheet" href="<?php echo base_url('assets/css');?>/owl.css" type="text/css">
<link rel="stylesheet" href="<?php echo base_url('assets/css');?>/owl_002.css" type="text/css">
<link rel="stylesheet" href="<?php echo base_url('assets/css');?>/fonts.css" type="text/css">
<link rel="stylesheet" href="<?php echo base_url('assets/css');?>/mitradekor.css" type="text/css">
<link rel="stylesheet" href="<?php echo base_url('assets/css/jquery-ui');?>/jquery-ui.css" type="text/css">
<link rel="stylesheet" href="<?php echo base_url('assets/css');?>/tooltipster.css" type="text/css">
<link rel="stylesheet" href="<?php echo base_url('assets/css/themes');?>/tooltipster-light.css" type="text/css">
<script src="<?php echo base_url('assets/js');?>/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="<?php echo base_url('assets/js');?>/jquery-ui.js" type="text/javascript"></script>

<script src="<?php echo base_url('assets/js');?>/jquery.contenthover.min.js" type="text/javascript"></script>

这是我的js代码，我使用外部文件并将其放在页脚

$( function () {
$(".owl-carousel").each(function() {
$(this).owlCarousel({
  items: 10,
  singleItem: true,
  autoPlay: true,
  stopOnHover: true,
  transitionStyle: true
 });
});

 **$( "#accordion" ).accordion({
  heightStyle: "content"
 });**
 });

我的代码有问题吗？

更新这是jsfidlle http://jsfiddle.net/a0jzt46p/

谢谢

Answer 1

当您下载 jQuery UI 时，它会提供您选择所需的所有选项。确保您在其中选择了 Accordion 。或者您可以使用包含完整文件的 CDN:https://code.jquery.com/ui/1.11.3/jquery-ui.min.js

使用该文件让它对我有用，但你还有另一个问题。有 2 个 ID 为 #accordion 的 div。删除一个，并使用完整的 UI 文件修复代码。这是更新的 jsfiddle:http://jsfiddle.net/a0jzt46p/1/

出于测试目的，我删除了您的 OwlCarousel 函数。