jquery Toggle() tut nicht

M

Mike Rofon

Erfahrenes Mitglied
Habe mir folgende Funktionalität ergoogelt:
HTML: 
<body>
<script>
$(document).ready(function() {
$("a.links").click(function() {
$(this).next("div").toggle();
});
});
</script>
<div>
<a href="#" class="links">Hier steht Text 1.</a>
<div>
Ich bin der Hilfetext zum 1. Text.
</div>
</div>
<div>
<a href="#" class="links">Hier steht Text 2.</a>
<div>
Ich bin der Hilfetext zum 2. Text.
</div>
</div>
</body>

Jetzt möchte ich das abgewandelt einsetzen:

HTML: 
<script>
$(document).ready(function() {
$("button.aufzu").click(function() {
$(this).next("tr").toggle();
});
});
</script>
...
<tr class="tabletr" style="color:#000;"><td>Telefonanlage</td><td>in der PBX Nebenstelle einrichten</td><td><button class="aufzu">v</button></td></tr>
<tr class="tabletr" id="form6" style="display:none;"><td valign=top><form><small>FN? SIP? Durchwahl:</small><br/><input type="text" name="ergebnis" maxlength=100 /></td><td><small>Bemerkung</small><br/><textarea name="bemerkung" rows=3 cols=40 ></textarea></form></td></tr>
...
Und das funktioniert nicht.
Also der Plan wäre, daß die zweite TR Zeile ein und ausgeblendet wird, zu Anfang definitiv ausgeblendet ist. Ist das display:none hier der falsche Weg? Muß da irgendwie onload='this.hide();' hin?
BTW: mit der id="form6" kann ich nur bedingt arbeiten, die ändert sich ständig, liegt in dieser Zeile aber als Variable vor.
Und daß das Formular noch unvollständig ist weiß ich. ;)

VG Mike
 
display:none ist schon der richtige Weg, aber: Mit next() findest Du ausgehend vom Button nicht die nächste Tabellenzeile. Du musst zunächst mit closest("tr") nach oben zur eigenen Zeile gehen und dann mit next zur nächsten:
Code: 
    <script>
        $(document).ready(function () {
            $("button.aufzu").click(function () {
                $(this).closest("tr").next("tr").toggle();
            });
        });
    </script>
    <table>
        <tr class="tabletr" style="color:#000;">
            <td>Telefonanlage</td>
            <td>in der PBX Nebenstelle einrichten</td>
            <td>
                <button class="aufzu">v</button>
            </td>
        </tr>
        <tr class="tabletr" id="form6" style="display:none;">
            <td valign="top">
                <form>
                    <small>FN? SIP? Durchwahl:</small>
                    <br/>
                    <input type="text" name="ergebnis" />
                </form>
            </td>
            <td>
                <form>
                    <small>Bemerkung</small>
                    <br/>
                    <textarea name="bemerkung" rows="3" cols="40"></textarea>
                </form>
            </td>
        </tr>
    </table>
 
Ah, verstehe, das muß quasi auf der selben "Ebene" oder "Verschachtelungstiefe" passieren, deswegen muß man "eins hoch".
Jedenfalls funktioniert das jetzt. Sehr cool.
Jetzt wäre es rein für die Haptik schön, wenn man Toggle() durch slideToggle() ersetzt und das irgendwas bewirkt. Leider "slidet" die zweite TR Zeile nicht rein und raus, auffällig ist nur daß es ein klein wenig dauert bis die TR dann doch ruckartig zu geht.
Quelle: https://schlapsi.com/2008/11/jquery-effektvoll-ein-und-ausblenden/
... unter Slide-Effekt
 
slideToggle() scheint problematisch für Tabellenzeilen zu sein, siehe hier:
https://stackoverflow.com/questions/467336/how-to-use-slidedown-or-show-function-on-a-table-row
Die genannte Lösung, jede Zelle zu wrappen funktioniert jedoch:
Code: 
    <script>
        $(document).ready(function () {
            $("button.aufzu").click(function () {
                $(this).closest("tr").next("tr").find(".slidetoggle").slideToggle();
            });
        });
    </script>
    <style>
        .slidetoggle {
            display: none;
        }
    </style>
    <table>
        <tr class="tabletr" style="color:#000;">
            <td>Telefonanlage</td>
            <td>in der PBX Nebenstelle einrichten</td>
            <td>
                <button class="aufzu">v</button>
            </td>
        </tr>
        <tr class="tabletr" id="form6" style="height: 0;">
            <td valign="top">
                <div class="slidetoggle">
                    <form>
                        <small>FN? SIP? Durchwahl:</small>
                        <br/>
                        <input type="text" name="ergebnis" />
                    </form>
                </div>
            </td>
            <td>
                <div class="slidetoggle">
                    <form>
                        <small>Bemerkung</small>
                        <br/>
                        <textarea name="bemerkung" rows="3" cols="40"></textarea>
                    </form>
                </div>
            </td>
        </tr>
    </table>
 
will leider nicht funktionieren. Eigentlich hab ich Deinen Code ziemlich 1:1 übernommen, außer ...

Ich mußte <tr class="tabletr" id="form6" style="height: 0;">
ersetzen durch <tr class="tabletr" id="form6" style="display: none;">

weil mit height=0 trotzdem ein grauer Strich unter der vorhergehenden Tabellenzeile entstand. sprich das TR was ein- und auszublenden ist, war nicht zu, und wenn man es manuell zutoggelt, bleibt ein grauer Strich stehen.
TD colspan=3 ist doch nicht das Problem, oder?

HTML: 
<script>
                /*    $(document).ready(function() {
                        $("img.aufzu").click(function() {
                            $(this).closest("tr").next("tr").slideToggle();
                            });
                        }); */
                    $(document).ready(function () {
                        $("img.aufzu").click(function () {
                            $(this).closest("tr").next("tr").find(".trslide").slideToggle();
                            });
                        });
                </script>

                <b>Arbeitsschritte</b><table width="95%">

                    <tr class="tabletr" style="color: #000;">
                        <td>Telefonanlage</td>
                        <td>in der PBX Nebenstelle einrichten</td>
                        <td><button><img class="aufzu" src="erweitern.png" alt="aufklappen und bearbeiten" /></button></td>
                    </tr>
                    <tr class="tabletr" id="form6" style="height: 0;">
                        <td colspan="3" valign="top">
                            <div class="trslide">
                            <form id="stepfertig" action="/_BR-Project/index.php?action=project&do=details&id=2&stepfertig=1&tid=4" method="post">
                            <table>
                                <tr id="" valign="top">
                                    <td><small>FN? SIP? Durchwahl:</small><br/><input type="text" name="ergebnis" size=30 maxlength=100 required /></td>
                                    <td><small>Bemerkung</small><br/><textarea name=\"bemerkung\" rows="4" cols="40" ></textarea></td>
                                    <td><button><img alt="fertigstellen und speichern" src="ok.png"></button></td>
                                </tr>
                            </table></form>
                            </div>
                        </td>
                    </tr>
 
Was will denn nicht funktionieren? Ich habe deinen letzten Code in eine Testseite übernommen und es funktioniert einwandfrei.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück