Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Pouze tento týden sleva až 80 % na e-learning týkající se Swiftu. Zároveň využij výhodnou slevovou akci až 30 % zdarma při nákupu e-learningu - více informací.
discount 30 + hiring

Diskuze: rozevírací nabídka stromového menu

Aktivity
Avatar
Martin Suchodol
Tvůrce
Avatar
Martin Suchodol:4.6.2020 8:46

Ahoj v php jsem si vytvořil stromové menu. A v editoru mám i náhled tohoto menu. Ještě jsem si chtěl udělat rozevírání a zavírání jednotlivých položek tohoto menu. Ale jelikož si s js moc netykám tak jsem našel tenhle script:

$.fn.extend({
    treed: function (o) {

      var openedClass = 'glyphicon-minus-sign';
      var closedClass = 'glyphicon-plus-sign';

      if (typeof o != 'undefined'){
        if (typeof o.openedClass != 'undefined'){
        openedClass = o.openedClass;
        }
        if (typeof o.closedClass != 'undefined'){
        closedClass = o.closedClass;
        }
      };

        /* initialize each of the top levels */
        var tree = $(this);
        tree.addClass("tree");
        tree.find('li').has("ul").each(function () {
            var branch = $(this);
            branch.prepend("");
            branch.addClass('branch');
            branch.on('click', function (e) {
                if (this == e.target) {
                    var icon = $(this).children('i:first');
                    icon.toggleClass(openedClass + " " + closedClass);
                    $(this).children().children().toggle();
                }
            })
            branch.children().children().toggle();
        });
        /* fire event from the dynamically added icon */
        tree.find('.branch .indicator').each(function(){
            $(this).on('click', function () {
                $(this).closest('li').click();
            });
        });
        /* fire event to open branch if the li contains an anchor instead of text */
        tree.find('.branch>a').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
        });
        /* fire event to open branch if the li contains a button instead of text */
        tree.find('.branch>button').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
        });
    }
});
/* Initialization of treeviews */
$('#tree1').treed();

Který by měl stromovému menu s ID tree1 přiřadit na každou úroveň rozvětvení classu tree. A zároveň každému rozvětvení přidat tlačítko na rozbalení/sbalení. Ale ať na to koukám jakkoliv tak nemohu přijít na to kde je chyba. Script nezvládne ani přiřadit classu tree

 
Odpovědět
4.6.2020 8:46
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:4.6.2020 12:51

A dal? Ten js bez html kodu nema smysl vubec studovat. Vytvor spustitelny html soubor a dej sem cely jeho kod.
Zkus se naucit psat dotazy tak, aby je pochopila i tva mamka. Pak je sance, ze je pochopi i osoba ktera nezna jakym smerem se ubiras v uvahach.

  • Z js kodu ti muzu rici, ze se aplikuje na jquery objekt $('#tree1'), cili tag s id=tree1. Ve tvem, zadnem, html kodu takovy tag nevidim. Chyba odhalena :) Z html kodu by se mozna dalo zjistit vice, treba preklep, to id mozna ma jiny nazev. Jsou to tyhle 3 radky, co urcuji prirazeni te class:
$('#tree1').treed(); // id na ktere
var tree = $(this); // nekde uprostred
        tree.addClass("tree");
  • jestli js udelal, co mel, tak se ve FF da zjistit tak, ze kliknes do stranky levym tl. mysi. Ctrl+A. Kliknes do vyberu pravym tl. mysi. a je tam menu zobrazit zdrojovy kod vyberu.

Ctrl+a, ctrl+c, pspad editor (napr). Novy html soubor, ctrl+v, a nekde v menu najdi po rozbaleni Preformatovat html kod, pro lepsi citelnost.

Editováno 4.6.2020 12:52
 
Nahoru Odpovědět
4.6.2020 12:51
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.