Listaelemek módosítása JavaScript-tel

Listaelemek módosítása JavaScript-tel
2021-08-12T00:30:57+02:00
2021-08-17T14:51:36+02:00
2022-10-15T21:26:19+02:00
*deleted_23419333
Sziasztok!

Ez egy WordPress widget által kreált kategórialista. Ha nagyon akarnám, akkor tudnám befolyásolni ezt a HTML kimenetet, de nem szeretném megváltoztatni, tehát ez legyen fix:

<div id="categories-3" class="widget widget_categories"> <div class="widgettitle">Categories</div> <div class="widgetcontent"> <ul> <li class="cat-item cat-item-4"> <a href="a" title="">A</a> </li> <li class="cat-item cat-item-26"> <a href="b" title="B">B</a> <ul class='children'> <li class="cat-item cat-item-117"> <a href="b1">B1</a> </li> <li class="cat-item cat-item-118"> <a href="b2">B2</a> </li> </ul> </li> </ul> </div> </div>

A .children listákat eltudom rejteni:

ul.children { display: none; }

Rákattintáskor, JavaScript-tel hogyan tudnám megjeleníteni őket?

Ha valaki rákattint a B-re, akkor szeretném, ha a B kategória oldalára lenne átirányítva, tehát először is kellene egy legördülő nyíl azokra a kategóriákra, ahol van alkategória is (JS-sel). Jelen esetben A-nak nem kell ilyen, de a B-nek már igen mert annak vannak alkategóriái.

Ha meg van a nyíl, akkor a nyílra kattintás után szeretném ha megjelennének az alkategóriák, de hogyan?

Csak kategóriák és alkategóriák vannak, tehát al-alkategóriák nincsenek (és remélem nem is lesznek).

Gondolom ez szimplán CSS-el megvalósíthatatlan, ezért marad a JS (amihez sajnos szinte egyáltalán nem értek).

Köszönöm előre is a segítséget.
Mutasd a teljes hozzászólást!
Megszületett:

<html> <head> <script> function myFunction( clna ) { var x = document.querySelector('.'+clna+' ul.children'); var y = document.querySelector('#'+clna); if (x.style.display != "block") { x.style.display = "block"; y.innerHTML = "▴"; } else { x.style.display = "none"; y.innerHTML = "▾"; } } window.addEventListener("load", function(){ [...document.querySelectorAll("ul li.cat-item")].forEach(li => { let classes = li.classList; let clickedId = ''; classes.forEach((c) => { if (/^cat\-item\-\d+/.test(c)) { clickedId = c; } }); const ul = li.querySelector("ul.children"); if(ul){ const div = document.createElement("div"); div.id = clickedId; div.classList.add("dropdown"); div.innerHTML = "▾"; div.addEventListener("click",()=>myFunction(clickedId)) li.insertBefore(div,ul) } }); }); </script> </head> </html>

Köszönöm a hozzájárulók hozzászólásait.

Mutasd a teljes hozzászólást!

  • hát, én fogtam és beírtam a googliba: 'javascript show submenu on click' (az üzenetet hosszabb idő volt megírni mint rátalálni egy megoldásra. az is lehet hogy legközelebb már ez fog segíteni neked :) )

    az első találat ez volt: Show sub-menu on click

    jquery, de szépen elmagyarázza a lépéseket/feltételeket. így ha gondolod át tudod írni js-re

    A topik alján lévő hasonló problémákban is van egy lehetséges megoldás (a hamburgeres), azt is érdemes átböngészni
    Mutasd a teljes hozzászólást!
  • hát, én fogtam és beírtam a googliba: 'javascript show submenu on click' (az üzenetet hosszabb idő volt megírni mint rátalálni egy megoldásra...

    Legközelebb mielőtt beírsz valamit a googliba, kérlek, olvasd el a nyitóhozzászólásomat és csak abban az esetben szellemeskedj egy hozzászólással, ha az valóban megoldást jelent a problémámra. Amit te linkeltél, az olyan mintha coca cola-t kértem volna és te pepsi helyett fanta-t adnál mert a nyilvántartás szerint végülis a fanta is üdítő meg a cola-k is azok.

    Ha csak annyit szeretnék, hogy elrejtsem az almenüt, az már megy (display: none) és azt előhozni is előtudnám, de a nyilak, amikről a nyitóhozzászólásomban írtam, az már meghaladja a tudásom. Nekem fontos, hogy kattintható legyen az a kategória is, aminek vannak alkategóriái is, tehát azt nem csak legördülő listaként szeretném használni, hanem linkként is. Ezért kellenek a nyilak.

    És elnézést kérek, de szeretnék pontosítani. Natív JavaScript megoldást szeretnék, jQuery és egyéb framework-ök nélkül.
    Mutasd a teljes hozzászólást!
  • hát akkor itt lenne az ideje ezt a topikot áttetetni az állást kínál rovatba vagy megtanulod a natív javascriptet. további sok sikert
     
    (elgondolkodtató hogy egy ilyen problémára -amit már ezerszer megoldottak- miért nem tolonganak a válaszok)
    Mutasd a teljes hozzászólást!
  • Megszületett:

    <html> <head> <script> function myFunction( clna ) { var x = document.querySelector('.'+clna+' ul.children'); var y = document.querySelector('#'+clna); if (x.style.display != "block") { x.style.display = "block"; y.innerHTML = "▴"; } else { x.style.display = "none"; y.innerHTML = "▾"; } } window.addEventListener("load", function(){ [...document.querySelectorAll("ul li.cat-item")].forEach(li => { let classes = li.classList; let clickedId = ''; classes.forEach((c) => { if (/^cat\-item\-\d+/.test(c)) { clickedId = c; } }); const ul = li.querySelector("ul.children"); if(ul){ const div = document.createElement("div"); div.id = clickedId; div.classList.add("dropdown"); div.innerHTML = "▾"; div.addEventListener("click",()=>myFunction(clickedId)) li.insertBefore(div,ul) } }); }); </script> </head> </html>

    Köszönöm a hozzájárulók hozzászólásait.

    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd