Для того чтобы собрать заголовки на jquery и построить из них меню я использовал такой скрипт. Данный скрипт можно улучшать и увеличивать уровень вложенности меню, путём добавления необходимых тегов для h* поиска.
Данный скрипт работает таким образом. Он находит, например, h1 и ищет следующий за ним h1 между этими заголовками уже совершается поиск h2 или любого другова тега.
tabid - это id , либо класс родительского элемента, где требуется поиск заголовков, далее у меня следуют класс .content_page и h1 tabid у меня изменялся в зависимости от того по какой ссылке был клик, т.е. на странице было несколько документов и для каждого при переходе формировалась своя навигация для быстрого поиска нужных разделов. Новое сформированное меню у меня храниться здесь $(".parseNav .parentUl")
меню будет иметь вид такой.
<ul class="parentUl"> <li class="parentListParse drop_menu" onclick="return false"> <a href="#id">Заголовк h1</a> <ul class="childUl sub_menu" style="display: none;"> <li class="subitem"> <a href="#id">Заголовк h2</a> </li> <li class="subitem"> <a href="#id">Заголовк h2</a> </li> </ul> </li> </ul>
Скрипт jQUERY
function menuParseFn(tabid){ $(".parseNav .parentUl").html(''); var hContent = 0; var attrId; var ih; var cnH1 = 0; var cnH2 = 0; $(tabid+' .content_page h1').each(function(index){ ih = 0; hContent = $(tabid).find('h1').eq(index).text(); attrId = $(tabid).find('h1').eq(index).attr('id'); $(".parseNav .parentUl").html($(".parseNav .parentUl").html()+"<li class='parentListParse drop_menu' onclick='' > <a href='#"+attrId+"' >"+hContent+"</a> <ul class='childUl sub_menu'></ul> </li>"); var iIndex = index+1; var countMenu = 0; $(tabid).find('h1').eq(index).nextUntil(tabid+' h1:eq('+iIndex+')', 'h2').each(function(index2){ var getFadeText = $(tabid+' h2').eq(cnH2).text(); var getFadeTId = $(tabid+' h2').eq(cnH2).attr('id'); $(".parseNav .childUl").eq(index).html($(".parseNav .childUl").eq(index).html()+"<li class='subitem'><a href='#"+getFadeTId+"'>"+getFadeText+"</a></li>"); countMenu++; cnH2++; }) var elLI =$(".parseNav .parentUl").find('.parentListParse').eq(index); if(countMenu == 0){ elLI.removeClass('drop_menu'); elLI.find('ul').remove(); elLI.addClass('nextAncor');} else{ elLI.attr('onclick', 'return false'); } })}
Комментарии (49)