2016-11-26 3 views
-1

Я пытаюсь реализовать аккордеон jQuery UI, чтобы свернуть мои поля при нажатии. Но он не работает. Может кто-нибудь указать мне в правильном направлении, пожалуйста?jQuery UI Accordion не работает

Codepen Link

$(function() { 
    $("#accordion").accordion({ 
     collapsible: true 
    }); 
    }); 
+0

Я не знаю, что вы хотите, но если вы прокомментируете аккордеон на '$ (функция()', а затем поместить этот код после 'for' в' success' обратного вызова, он будет работать. http://codepen.io/anon/pen/MbvmBN –

+0

Эй, спасибо, вы должны опубликовать как ответ, чтобы я мог повышать! Так что мне не нужна функция в конце концов, просто выберите элемент #accordion и примените метод к нему? Потому что функция сверху - теперь пустая функция. Хотя я обнаружил немного «ошибки». Когда я нажимаю ссылку, чтобы выйти за пределы моей страницы, пользовательский интерфейс jQuery прерывается до жесткого обновления. Мне нужно пойти проверить видео на пользовательском интерфейсе jQuery, возможно, это выглядело более простым в документе s. Еще раз спасибо ! – Kyriediculous

+0

Улучшение форматирования. – jordiburgos

ответ

1

Я не расслышал, что в последний раз, у вас есть $(document).ready() и у вас есть $(function() внутри $(document).ready(), они одинаковы, но сокращенно:

$(document).ready(function() VS $(function(){

И поскольку вы создаете аккордеон после создания элементов с помощью javascript, вам нужно вызвать метод аккордеона, потому что это новый контент.

$.ajax({ 
    type:"GET", 
    url:apiURL, 
    dataType:"json", 
    async:false, 
    success: function(response){ 
     console.log(response); 
     searchTitles=response[1]; 
     searchDescription=response[2]; 
     searchLink=response[3]; 

     for (var i = 0; i<searchTitles.length; i++) { 
     $(".results").prepend("<h3>"+searchTitles[i] +"</h3>" + "<div> <p>"+searchDescription[i]+"</p>" + "<a target='blank' class='btn btn-warning' href='"+searchLink[i]+"'>More</a></div>"); 
     } 

     //After the new content, generate the accordion 
     $("#accordion").accordion({ 
     collapsible: true 
     }); 
    } 
});