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

Naučíme tě pracovat na home-office.

Zjistit více...

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Martin Suchodol

Člen

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

Peter Mlich

Člen

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.