Я пытаюсь построить экран, который будет представлять собой иерархический список закладок, сгруппированных по категориям. Категории могут быть расширены/свернуты, чтобы показать или скрыть закладки для этой категории. Прямо сейчас я просто работаю над пользовательским интерфейсом и впервые использую jquery (и мне это нравится).
Методология, которую я использую, похожа на аккордеон, но одновременно может быть открыто более одного раздела, и может быть несколько уровней глубины (аккордеон поддерживает только один уровень). Для каждой категории есть div с изображением папки в нем, который будет отображать или скрывать следующий элемент в DOM, который будет набором закладок (обычно ‹ul›). например:
<div class="categoryLine" id="d4">
<img class="folder"....>
Fourth Menu Item
</div>
<ul id="u4">
<li id="l41">
Я выбираю элемент для закрытия с помощью $(this).parentsUntil('categoryLine').next().toggle(transitionSpeed);, где div вокруг изображения, на которое нажимает пользователь, имеет класс categoryLine, а элемент, который нужно показать/скрыть, — это элемент, следующий за этим div.
Проблема в самой сложной (самой глубокой иерархии) части, скрываются некоторые вещи, которых быть не должно, и по непонятным причинам вновь появляются.
Вы можете увидеть «рабочий» пример здесь. Я дал соответствующие идентификаторы тегов и добавил предупреждение об отладке, чтобы отобразить идентификатор элемента, на который нажали, а также элементы, которые нужно открыть и закрыть (см. исходный код, чтобы увидеть это).
- Нажмите на папку «Четвертый пункт меню», чтобы отобразить эту категорию. Вы должны увидеть подпрограммы 1, 2 и 3.
- Нажмите на папку для «Четвертого пункта меню, подпункт 1». Вы должны увидеть, что подпункт 1 расширяется, но подпункт 2 полностью исчезает, включая строку категории. Это загадка, которую я пытаюсь разгадать. Нажатие на сабвуфер 1 правильно говорит «Переключение« u411 »из категории« d41 »», но когда исчезает ‹ul› u411, исчезает и весь сабвуфер 2. Точно так же, если я нажму на папку, чтобы развернуть sub2, sub3 исчезнет.
Я готов реализовать это совершенно по-другому (опять же, это мой первый эксперимент с jquery). Я также хотел бы рассмотреть решения, в которых одновременно может быть открыта только одна категория, если она по-прежнему поддерживает иерархию, а не одну глубокую, как аккордеон.
Заранее спасибо.
