JQuery-UI аккордеонная проблема: анимация зависает + контент не отображается при нажатии - PullRequest
Новая
       4

JQuery-UI аккордеонная проблема: анимация зависает + контент не отображается при нажатии

0 голосов
/ 01 октября 2011

Я пробовал аккордеон jQueryUI. Я создал тестовый сайт, скопировал код и поставил все на свои места. Работает нормально.

Тогда я попытался разместить его на своем сайте. На моем сайте у меня есть два меню. Один горизонтальный, сверху. Другой вертикальный, слева. Я намерен применить гармошку к вертикальному меню. Вертикальное меню также изменится при нажатии другого элемента в верхнем горизонтальном меню.

Первым делом я протестировал его на своей домашней странице, просто чтобы посмотреть, нет ли каких-либо конфликтов с моим текущим дизайном. Код для вертикального меню выглядит так: 

<!-- leftFrame begin -->
<div id="leftFrame">
    <div id="accordion">
        <h3><a href="#section1">Section 1</a></h3>
        <div>
            <p>homepage11111111</p>
        </div>

        <h3><a href="#section2">Section 2</a></h3>
        <div>
            <p>homepage22222222</p>
        </div>

        <h3><a href="#section3">Section 3</a></h3>
        <div>
            <p>homepage33333333</p>
            <ul>
                <li>List item</li>
                <li>List item</li>
                <li>List item</li>
                <li>List item</li>
            </ul>
            <a href="#othercontent">Link to other content</a>
        </div>
    </div>
</div>  <!-- leftFrame end -->

<script type="text/javascript">
    $(document).ready(function(){
        $( "#accordion" ).accordion({
            autoHeight: false,
            navigation: true
        });
    });
</script>

Вот и возникла проблема. Первый штраф был расширен по умолчанию. Когда я нажал на другую панель, содержимое под этой панелью не было показано. Он просто немного расширился и застыл там. Первая панель тоже не рухнула. Все панели стали неактивными. Как на скриншоте ниже:

enter image description here

Интересно было бы, если бы я поместил аккордеонную часть в отдельный файл leftmenu.html и использовал «$ ('# leftFrame'). Load (leftmenu.html)» для загрузки его в div «leftFrame». Все снова работает.

Моей первой мыслью было, что какой-то другой javascript или css на главной странице могут повлиять на это. Я попытался закомментировать часть тогда всего другого javascript или css. Он все еще не работал на главной странице, хотя работал нормально с функцией .load.

Есть идеи, почему?

Заранее спасибо Мило

Ответы [ 2 ]

0 голосов
/ 05 апреля 2012

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

Я клонировал первую (единственную) часть аккордеона, добавил ее в конец, затем изменил название и содержание в соответствии с моими потребностями. После этого я уничтожил и снова добавил аккордеон, чтобы он работал с новым содержимым. После этого несколько (все новые) разделы показывались как активные (из-за клона), и когда я щелкал по ним, они изначально работали, но внезапно перестали работать в какой-то момент.

Чтобы решить эту проблему, я сделал следующее:

  1. Перенес уничтожение до клона / дополнения
  2. клонировал / добавил мои новые разделы
  3. изменил содержание моего раздела по мере необходимости
  4. Добавлена ​​функциональность аккордеона.

Надеюсь, это поможет кому-то по пути.

0 голосов
/ 13 декабря 2011

Оказалось, что конфликт между различными js-файлами стал проще. Просто убедитесь, что вы используете только одну версию функции замедления.

...