Isaac Sogunro Ответов: 1

Как сделать динамическую выпадающую ссылку доступной

Я создал динамическую горизонтальную навигационную панель из массива объектов. Поскольку мои навигационные элементы отображаются на странице, она также связывает каждый элемент. Проблема, с которой я сталкиваюсь, заключается в том, что элемент имеет выпадающее меню. Я не в состоянии сделать так. Так например, Сайта, SiteC и Обучение это выпадающие списки, но они не являются ссылками, как другие.
Вот выдержка из кодекса::
function createNavigation(navData) {
	var topNav = document.getElementById("myTopnav");
	for (var x = 0; x < navData.length; x++) {
		if (navData[x].dropDown === "no") {
			var aLink = _createEl("a");
			var aTextNode = document.createTextNode(navData[x].URLNAME);
			aLink.href = navData[x].URL;
			aLink.appendChild(aTextNode);
			topNav.appendChild(aLink);
		} else if (navData[x].dropDown === "yes") {
			var buildSubNavigation;
			buildSubNavigation = buildSubNavBar(navData[x].id);
			topNav.appendChild(buildSubNavigation);
		} else {
			//build megamenu
			var buildSubNavigation;
			buildDirectorateNav = buildDirectorateMegaMenu(navData[x].id);
		}
	}
}


Вот это самое ручка[^] для большего контекста

Что я уже пробовал:

Я попытался изменить эту функцию, но потом стиль испортился.
function createNavigation(navData) {
	var topNav = document.getElementById("myTopnav");
	for (var x = 0; x < navData.length; x++) {
		if (navData[x].dropDown === "no") {
			var aLink = _createEl("a");
			var aTextNode = document.createTextNode(navData[x].URLNAME);
			aLink.href = navData[x].URL;
			aLink.appendChild(aTextNode);
			topNav.appendChild(aLink);
		} else if (navData[x].dropDown === "yes") {
			var buildSubNavigation;
			buildSubNavigation = buildSubNavBar(navData[x]);

			topNav.appendChild(buildSubNavigation);
		} else {
			//build megamenu
			var buildSubNavigation;
			buildDirectorateNav = buildDirectorateMegaMenu(navData[x]);
		}
	}
}


Вот это самое ручкой pen2[^]

1 Ответов

Рейтинг:
1

Sandeep Mewara

Причина в том, что вы просто добавляете текст в случае высокоуровневого пункта меню в виде выпадающего списка. Вам нужно будет передать url-адрес главного меню при создании сборки подменю. Во время этого добавьте url-адрес и в Главное меню.

Я немного изменил это, чтобы показать, что, пожалуйста, убедитесь, что другие вызовы методов не нарушены:

function createNavigation(navData) {
	var topNav = document.getElementById("myTopnav");
	for (var x = 0; x < navData.length; x++) {
		if (navData[x].dropDown === "no") {
			var aLink = _createEl("a");
			var aTextNode = document.createTextNode(navData[x].URLNAME);
			aLink.href = navData[x].URL;
			aLink.appendChild(aTextNode);
			topNav.appendChild(aLink);
		} else if (navData[x].dropDown === "yes") {
			var buildSubNavigation;
			buildSubNavigation = buildSubNavBar(navData[x].id, navData[x].URLNAME); // CHANGE HERE
      
      var aLink = _createEl("a");
			var aTextNode = document.createTextNode(navData[x].URLNAME);
      //
      //
			topNav.appendChild(buildSubNavigation);
		} else {
			//build megamenu
			var buildSubNavigation;
			buildDirectorateNav = buildDirectorateMegaMenu(navData[x].id);
		}
	}
}

function buildDirectorateMegaMenu(navDataID) {
	var buildNav;
	var topNav = document.getElementById("myTopnav");
	buildNav = buildSubNavBar(navDataID, "", "training");  //Build mega menu and attach in buildSubNavBar() // CHANGE HERE to pass dummy URL
	topNav.appendChild(buildNav);
}

function buildSubNavBar(subNavID, subNavURL, isDirectorate) { //CHANGE HERE - added URL as one more parameter.
    //create div and add dropdown class
    var ddDiv = _createEl("div");
    if(isDirectorate === "training"){
        ddDiv.classList.add("Mdropdown");
    }else{
        ddDiv.classList.add("dropdown");
    }
    //create button and add text
    var btn = _createEl("button");
    if(isDirectorate === "training"){
        btn.classList.add("Mdropbtn");
    }else{
        btn.classList.add("dropbtn");
    }
    var btnText = document.createTextNode(subNavID);
    //append the text to the button
    // CHANGE HERE
    // ADDED link instead of text
     var aLink = _createEl("a");
		 var btnText = document.createTextNode(subNavID);
		 aLink.href = subNavURL;
		 aLink.appendChild(btnText);
		 btn.appendChild(aLink);
    //

    ...

Отмеченные изменения сделаны с комментарием: изменить здесь