#jquery #jquery-ui
#jquery #jquery-ui
Вопрос:
Я создаю сайт на основе этой платформы и пытаюсь настроить, как работает аккордеон меню разделов. Я хочу, чтобы выбранный / активный элемент отражал, какая страница отображается в данный момент. В настоящее время, как вы можете видеть из кода, он выбирает первый элемент по умолчанию:
SectionMenu : function(){
$("#section-menu")
.accordion({
"header": "a.menuitem"
})
.bind("accordionchangestart", function(e, data) {
data.newHeader.next().andSelf().addClass("current");
data.oldHeader.next().andSelf().removeClass("current");
})
.find("a.menuitem:first").addClass("current")
.next().addClass("current");
},
До сих пор я мог указать элемент, который будет выбран с помощью этого на странице:
<script>
$("#section-menu")
.accordion({
"header": "a.menuitem",
"collapsible": true,
"active":4
});
</script>
Проблема в том, что первый элемент по-прежнему остается выделенным как текущий. Я прикрепил изображение, чтобы лучше проиллюстрировать то, что я описываю:
Куда мне следует перейти отсюда, чтобы исправить это?
Спасибо!
Редактировать
Я прокомментировал последние две строки SectionMenu
блока, и это решило проблему с тем, что первый элемент всегда выбирался как текущий. Теперь мне просто нужно иметь возможность обращаться .addClass("current")
к соответствующему элементу, и это должно сработать.
Решение
Как и в моем последнем редактировании, я удалил последние две строки в SectionMenu
блоке и добавил следующий код в <script>
часть каждой страницы:
<script type="text/javascript">
$("#section-menu")
.find("[href^='<HREF>']:first").addClass("current")
.next().addClass("current");
</script>
Где <HREF>
имя страницы. Это правильно выбирает и применяет CSS к соответствующему узлу.
Ответ №1:
Вы можете установить navigation
опцию true
для сохранения состояния на основе href. Документация здесь.
$("#section-menu")
.accordion({
"header": "a.menuitem",
"collapsible": true,
"navigation": true
});
Комментарии:
1. Спасибо за ссылку. К сожалению, добавление этого в код приводит к расширению каждого элемента в меню.
2. Хорошо, я кое-что изменил, что вернуло меня туда, где я был, когда я опубликовал этот вопрос. Я добавил
href="page.html"
к родительскому<li>
элементу, и это выбрало и расширило соответствующий узел. Однако к первому элементу по-прежнему применяется «текущий» CSS.3. Нужно ли мне как-то использовать
.find()
, чтобы правильно применить стиль? Проверьте мое последнее редактирование, чтобы увидеть, что я обновил, чтобы быть на шаг ближе.4. Я думаю, что сценарий accordion добавляет класс к текущему элементу. Вы можете найти этот класс и заменить его содержимое содержимым «текущего» класса.
5. Да, это так. В этой версии последние две строки
SectionMenu
блока всегда выбирают первую (.find("a.menuitem:first").addClass("current").next().addClass("current")
) . Мне нужно как-то изменить эту часть, чтобы применить CSS к активному элементу.
Ответ №2:
<script type="text/javascript">
$("#section-menu")
.accordion({
"header": "a.menuitem",
"collapsible": true,
"active": <INDEX>
});
</script>
Где <INDEX>
находится <INDEX>th
a.menuitem
элемент вашего аккордеона
Вы можете прочитать больше на странице документации accordion
Комментарии:
1. Спасибо за ваш ответ. Где мне это разместить? Я поместил его в свой
<script>
тег, но это заставило меня сделать шаг назад. Теперь первый элемент снова расширяется и выбирается как текущий.