JQuery UI:Accordion不是一个功能

时间:2016-05-08 23:59:07

标签: jquery html5 jquery-ui html5boilerplate

解答:

  

事实证明,在HTML5 boileplate生成的HTML底部有一个对JN的CDN调用,因此它卸载了JQuery UI。

我有一个HTML5 Boilerplate项目,最终将通过Django提供。暂时我只是想让我的前端看起来不错。

我已经将JQuery和JQuery UI链接在了我和JQuery函数中,看起来他们正在工作,但由于某种原因,它拒绝承认手风琴存在。我得到了#34; Uncaught TypeError:$(...)。accordion不是一个函数"

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>DaCara</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <!-- Place favicon.ico in the root directory -->

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="js/jquery-ui-1.11.4/jquery-ui.css">
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script type="text/javascript">
    $(function(){
      $(".news_container").accordion();
    });
    </script>
</head>

Div定义:

            <div class="news_container">
          <h3>Test News, please ignore</h3>
          <div class="news_item">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut
              gravida at est non blandit. Maecenas elementum ullamcorper
              rutrum. Suspendisse  dignissim porta congue. Mauris finibus
              neque diam,  ullamcorper sodales est suscipit a.
            </p>
          </div>
          <h3>Test News2, please ignore</h3>
          <div class="news_item">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut
              gravida at est non blandit. Maecenas elementum ullamcorper
              rutrum. Suspendisse  dignissim porta congue. Mauris finibus
              neque diam,  ullamcorper sodales est suscipit a.
            </p>
          </div>
          <h3>Test News3, please ignore</h3>
          <div class="news_item">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut
              gravida at est non blandit. Maecenas elementum ullamcorper
              rutrum. Suspendisse  dignissim porta congue. Mauris finibus
              neque diam,  ullamcorper sodales est suscipit a.
            </p>
          </div>
          <h3>Test New4, please ignore</h3>
          <div class="news_item">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut
              gravida at est non blandit. Maecenas elementum ullamcorper
              rutrum. Suspendisse  dignissim porta congue. Mauris finibus
              neque diam,  ullamcorper sodales est suscipit a.
            </p>
          </div>
        </div>

1 个答案:

答案 0 :(得分:1)

你确定这就是你拥有的吗?至少,jQuery会返回一个包含匹配元素的jQuery集合。即使它没有找到任何东西,它仍会返回该集合,尽管它是空的。即使是空的,package com.newyzon.controllers; import java.io.IOException; import java.util.HashMap; import java.util.Map; import javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.xml.rpc.ServiceException; import com.newyzon.beans.Cart; import com.newyzon.beans.BookData; import com.newyzon.beans.BookMeta; import com.newyzon.beans.DisplayBookList; import com.newyzon.services.*; public class BooklistController { LoginController lc; Map<String, BookData> booklist = new HashMap<String, BookData>(); public BooklistController(LoginController lc) { this.lc = lc; } public void displayBookList(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException, ServiceException { BooksService bs = new BooksServiceLocator(); Books books = bs.getBooksPort(); //response.getWriter().append(books.getBook(1).getTitle()); int quant = books.getSize(); String output = "<br/>"; for(int i=0; i < quant; i++) { Book bk = books.getBook(i); BookData bd = new BookData(bk.getId(), bk.getTitle(), bk.getAuthor(), bk.getPublisher()); output += "<a href='Controller?task=addbook&bookid=" + bd.getId() + "'>" + bd.getTitle() + "</a><br/>"; booklist.put("" + bd.getId(), bd); } DisplayBookList dbl = new DisplayBookList(output); request.getSession().setAttribute("displayBookList", dbl); lc.sendRedirectJsp("bookList", request, response); } public void addToCart(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String bookid = request.getParameter("bookid"); BookData bk = booklist.get(bookid); // Add the book to the cart Cart cart = (Cart)request.getSession().getAttribute("cart"); if(cart == null) { cart = new Cart(); request.getSession().setAttribute("cart", cart); } BookMeta bm; if((bm = cart.contains(bk)) != null) { bm.setQuantity(bm.getQuantity() + 1); } else { bm = new BookMeta(bk, 1); cart.getBooks().add(bm); } } } 仍然可以调用。结论是accordion()没有返回jQuery集合。这意味着你在那里有某种拼写错误或者jQuery没有附加到$()。虽然这可能会如何发生,但仍允许准备速记是一个谜。

证明这一点的jsfiddle是here。请注意,尽管没有内容,但$无问题。