Dotaz: JQuery css atributy

[xxxxxx]

Seznamuji se s JQuery a narazil jsem na problém se zobrazením/schováním části tabulky.

Tabulka vypadá takhle:

<tr id="switch_additional">
    <td class="blank">Doplňující informace</td>
    <td class="blank"></td>
</tr>
<tr class="additional">
    <td>Výška:</td>
    <td><input type="text" name="height" value=""></td>
</tr>
...

A k tomu JS:

var additional_visible = false;

$('.additional').hide();
$('#switch_additional').css('border-bottom', 'solid 1px #666');
$('.additional').css('border', '');
$('.blank').css('border', '');

$('#switch_additional').click(function () {
    if (additional_visible) {
        additional_visible = false;
        $('.additional').hide(0);
        $('#switch_additional').css('border-bottom', 'solid 1px #666');

        $('.tr_btn td').css('border', 'none', 'important');
        $('.blank').css('border', 'none', 'important');
    }
    else {
        additional_visible = true;
        $('.additional').show(500);
    }
});

Takže ve výchozím stavu po načtení stránky mají všechny tr.additional style="display: none;", to je OK.

Když kliknu na tr#switch_additional, tak se objeví několik řádků tabulky, kterým se přidá style="display: table-row;", OK, funguje.

Problém je, že ty dva td v tr#switch_additional dostanou style="border: medium none;" a nemůžu se toho zbavit, hledal jsem, kde se dalo, ale nic. Zkoušel jsem nastavovat různé kombinace border ''/'none', či dát tr#switch_additional colspan="2" namísto dvou td, ale vždycky se tam objeví ten border: medium, takže tam najednou je mřížka, i když tam být nemá.

Takhle to zobrazuje Firefox, avšak Konqueror to zobrazuje, jak bych si představoval, tj. i po zobrazení/skrytí jako ve výchozím stavu.

Mám na tom já něco špatně, nebo je to vlastnost Firefoxu?

Odpovědi

[chrono]

1. Kde v dokumentácii jQuery sa píše, že funkcia css môže mať 3 parametre?
2. Ak chcem meniť stav nejakého elementu v závislosti od toho, či je zobrazený/skrytý, tak sa to, zvyčajne, nerobí pomocou globálnej premennej
3. Css sa mení pomocou funkcie .css len výnimočne a takmer nikdy v prípade, ak sa má meniť viac vecí naraz (zvyčajne sa pridá/odoberie class)

[xxxxxx]

Díky za připomínky. Ty 3 parametry u css, to jsem se někde přehlédl, když už jsem zkoušel všechno možné...

Přepsal jsem to takhle:

$('.additional').hide();

$('#switch_additional').click(function () {
    if ($('.additional').is(':visible')) {
        $('.additional').hide(0);
    }
    else {
        $('.additional').show(500);
    }
});

Tj. žádný style se nemění, class se nepřidává ani neodebírá a stejně to Konqueror zobrazí jako border: none a Firefox jako border: medium none;. Vůbec tomu nerozumím, nikde v CSS nemám medium, ani nikde jinde.

[svido]

a co třeba použít jednodušší fci a to: toggle() - http://api.jquery.com/toggle/ Osobně memám moc rád změnu layoutu stránky po načtení stránky, kór když to jde už řešit na straně serveru. Dost často se setkávám s tím, že je na stránkách 20 i více document ready eventů a to není rozhodně optimální.

$('.additional').hide();
$('#switch_additional')
    .unbind('click.your_namespace')
    .click('click.your_namespace', function(){
        $('.additional').toggle();
    });

[svido]

ještě jsem zapomněl, ono různé browsery různě vykreslují. A to, že vidíš border: medium none nemusí nic znamenat.

Podle mne se vykašli na Konqueror, je to šílený browser a ani neznám moc lidí, kteří ho používají. Jestli budeš / děláš weby testuj především v Chrome, FF a IE. Ostatní mají minoritní podíly a pokud bude CSS napsaný dobře, tak v moderních browserech nejsou velké problémy.

[xxxxxx]

Díky za radu, toggle jsem zkoušel, ale show/hide jsem tam nechal kvůli rozdílným trváním animací. Konqueror jinak nepoužívám, netestuji na něm, ale je to jediný browser, co mám zrovna nainstalovaný, takže jsem chtěl jen vidět, jestli je tam nějaký rozdíl. Pořád mi není jasné, kde se ten border vzal a docela mě to irituje :o).

Měnit layout se mi koneckonců taky nelíbí, ale v mém případě to z hlediska ovládání aplikace dává větší smysl, než to řešit na serveru s nějakým GET parametrem.