Аккордеон jQuery не работает

Я пытаюсь использовать плагин аккордеона jquery ui, и я не знаю, почему он не работает.

Я зашел на http://jqueryui.com/ и прочитал документацию, выбрал тему, а затем выбрал "UI Core toggle all", а потом в виджетах выбрал только "Гармошку".

Я сохраняю файлы в папке «acc», а затем импортирую файлы следующим образом:

<link rel="stylesheet" type="text/css" href="../acc/css/jquery-ui-style.css" />
<title>Projet</title>
<script type="text/javascript" src="../acc/js/jquery.js"></script>
<script type="text/javascript" src="../acc/js/jquery-ui.js"></script>
<script type="text/javascript" src="../acc/js/acc.js"></script>

А затем в моем файле acc.js я запускаю аккордеон:

$(function (){
    $('.accordion').accordion();
});

Но это не работает, у меня только обычный html без аккордеона.

Мой html таков:

 <div class="accordion">

        <h3>Title 1</h3>    
        <div>
            <p>My first post.</p>
        </div>        

        <h3>Title 2</h3>
        <div>
            <p>My second post.</p>  
        </div>        

        <h3>Title 3</h3>
        <div>
            <p>My third post</p>    
        </div>

    </div><!-- /accordion -->

javascript jquery accordion jquery-ui jquery-ui-accordion
person OzzC    schedule 24.04.2014    source источник
comment
Куда вы помещаете этот файл HTML?   -  person Felix    schedule 24.04.2014
comment
проверьте исходную html-страницу и обратите внимание, правильно ли импортированы ваши скрипты   -  person Daniel Melo    schedule 24.04.2014
comment
Этот html-файл находится в файле example.php, в том же файле, где у меня есть импорт jQuery!   -  person OzzC    schedule 24.04.2014

Ответы (3)


arrow_upward
1
arrow_downward

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

Если папка acc находится в корневой папке вашего веб-сайта, вам следует подумать об изменении ваших скриптов и css на:

<link rel="stylesheet" type="text/css" href="/acc/css/jquery-ui-style.css" />
<script type="text/javascript" src="/acc/js/jquery.js"></script>
<script type="text/javascript" src="/acc/js/jquery-ui.js"></script>
<script type="text/javascript" src="/acc/js/acc.js"></script>

Удалите точки - так как это означает, что вы пытаетесь перейти в папку, расположенную выше того места, где вы находитесь (в URL-адресе, а не в файле с html).

Если это не сработает, нажмите f12 и проверьте свою консоль, возможно, у вас есть другие ошибки js, мешающие работе аккордеона.

person Pete    schedule 24.04.2014
comment
Спасибо, проблема была именно в этом! Но это странно, потому что у меня есть папка проекта, а затем у меня есть папка tpl и папка acc, мой пример с html аккордеона находится внутри папки tpl, а сценарии jquery находятся в папке acc, которая находится вне папки tpl! Итак, я думаю, что мне нужно было сделать ../, чтобы вернуться на 1 папку! Но все работает, как вы сказали, спасибо :) - person OzzC; 24.04.2014

arrow_upward
2
arrow_downward

Я не совсем знаком с аккордеонами пользовательского интерфейса jQuery, но вы пытались разместить свой $('.accordion').accordion(); внутри jQuery document.ready?

См. приведенный ниже код. Скорее всего, ваш аккордеон инициализируется до того, как появится фактический HTML-код на странице. Это предполагает, что вы правильно настроили свой html и включили правильные файлы JavaScript jQuery и т. Д.

$(document).ready(function() { 
 $('.accordion').accordion();
});

Надеюсь, это поможет.

person John Miller    schedule 24.04.2014
comment
$(function () — это еще один способ сказать «готово», поверьте, это помогает с конфликтами библиотек. - person AbstractChaos; 24.04.2014
comment
Ага, не понял :) - person John Miller; 24.04.2014

arrow_upward
1
arrow_downward

Похоже, вы сняли флажок с ядра JqueryUI, загрузили стандартную версию JqueryUI и перезаписали созданную версию.

скрипка показывает, что код правильный. Если вам не хватает ядра то никакие виджеты работать не будут

$(function (){
    $('.accordion').accordion();
});
person AbstractChaos    schedule 24.04.2014