手风琴呈现但没有反应

时间:2016-02-03 21:59:00

标签: javascript jquery accordion

另一天,另一个挑战。这应该很简单。我得到了手风琴渲染,但它不起作用。我究竟做错了什么?我收到错误"Can't find variable: jQuery"。这指的是accordion.min.js文件的最后一行}( jQuery, window, document);

以下是整个HTML。

<!DOCTYPE html>
<html>
        <title> Semantic UI - Accordian </title>
        <h1>Semantic UI Accordian - Not Working</h1>
        <hr>
        <p>The source semantic UI component files are correct. And I am loading the latest version of jQuery.  The Accordian renders, but it does not function.  What am I doing wrong?  I tried using the main semantic.js and semantic.css files - that encompasses all components, but this also did not work. </p>
        <br>
        <h3>Error Message in Safari Error Console</h3>
        <p> I only see one error.  It refers to the last line in the accordion.js or accordion.min.js file.  It reads "can't find variable jQuery".  and refers to a closing "}( jQuery, window, document);" statement.  I got the same error when trying to load an earlier version of jQuery 2.1.3.   What am I doing wrong?  </p>
        <head>
        <script type="text/javascript" src="http://oss.maxcdn.com/semantic-ui/2.1.8/components/accordion.min.js"></script>
        <link rel="stylesheet" href="https://oss.maxcdn.com/semantic-ui/2.1.8/components/accordion.min.css">
        <script src="https://code.jquery.com/jquery-2.2.0.js"></script>  

    </head>
    <body>
            <div class="ui styled accordion">
              <div class="title">
                <i class="dropdown icon"></i>
                What is a dog?
              </div>
              <div class="content">
                <p class="transition hidden">A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
              </div>
              <div class="title">
                <i class="dropdown icon"></i>
                What kinds of dogs are there?
              </div>
              <div class="content">
                <p class="transition hidden">There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p>
              </div>
              <div class="title">
                <i class="dropdown icon"></i>
                How do you acquire a dog?
              </div>
              <div class="content">
                <p class="transition hidden">Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>
                <p class="transition hidden">A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p>
              </div>
            </div>

    <script>
            $('.ui.accordion').accordion();
    </script>    
    </body>
</html>

1 个答案:

答案 0 :(得分:2)

包括

<script src="https://code.jquery.com/jquery-2.2.0.js"></script>  

 <script type="text/javascript" src="http://oss.maxcdn.com/semantic-ui/2.1.8/components/accordion.min.js"></script>