Enter
2020-05-18 20:12:00
406

Для того чтобы собрать заголовки на 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)