javascript toggle-Taste, zum öffnen und schließen eines div

Wie kann ich meine Schaltfläche Umschalten, um nicht nur Namen ändern, aus dem Blick zu verbergen, sondern um die Anzeige einer Tabelle, die ich habe in ein div-tag?

Momentan habe ich Folgendes für mein script:

   <script type = "text/javascript">
function buttonToggle(where,pval,nval)
{
        where.value = (where.value == pval) ? nval : pval;

}
</script>

- und dies ist der code für den button:

<input type="button" name="button1" id="nextbt" value="View " onclick="buttonToggle(this,'View ','Hide ')">

Können Sie erklären, mehr in die Tiefe, was Sie erreichen möchten? vielleicht ein Beispiel?
wenn die Seite geladen ist, die Taste würde sagen anzeigen und die Tabelle ausgeblendet werden, die in einem div. wenn die Schaltfläche geklickt wird er wechseln würde, sich zu verstecken und die Tabelle angezeigt werden würde. wenn ausblenden geklickt wird, würde der Tisch Weg gehen und die Taste, gehen Sie zurück zu Ansicht

InformationsquelleAutor phil | 2011-03-08

Gut, wenn Sie jQuery verwenden, wäre es sehr einfach:

$('#nextbt').click(function() {
    if ($(this).attr('value') == 'show') {
        $(this).attr('value', 'hide');
        $('#myotherdiv').slideDown();
    } else {
        $(this).attr('value', 'show');
        $('#myotherdiv').slideUp();
    }

    //or if you don't care about changing the button text, simply:
    $('#myotherdiv').slideToggle();
});

Mehr hier: http://api.jquery.com/slideToggle/

Es ist auch ziemlich einfach, ohne jQuery 😉

InformationsquelleAutor Adrian Macneil

1

jQuery verwenden. siehe demo http://jsfiddle.net/nBJXq/2/
- Abgesehen davon, dass es nicht aufgefordert wurde, sich für jQuery, könnte man zumindest veröffentlichen Sie Ihren code in deine Antwort. Ansonsten ist es eine ziemlich schlechte Antwort.
- Kling, Was macht meine Antwort schlecht? Auch wenn jQuery nicht aufgefordert wurde, sollten wir empfehlen es. Wenn der Fragesteller erwähnt hat "No-jQuery" ich würde nicht einmal versucht, diese zu beantworten. versuchen Sie, mehr zu geben.
- Was ist, wenn Ihre Verbindung bricht in der Zukunft aus welchem Grund auch immer? Die Antwort von selbst ohne link wird nicht jeder hilfreich. Und nehmen Sie nicht für selbstverständlich, dass der link funktioniert immer.
- Kling, Mein Punkt ist jQuery Verwenden.
InformationsquelleAutor Mahesh

Lassen Sie uns sagen, Sie fügen Sie die id von der Tabelle, die Sie möchten, um zu zeigen/verbergen, da die rel - Attribut des button:

<input type="button" name="button1" id="nextbt" 
       rel="myTable" value="View " 
       onclick="buttonToggle(this,'View ','Hide ')">

<table id="myTable">
    <tr>
        <td>myTable</td>
    </tr>
</table>

Dann könnten Sie fügen Sie Folgendes zu Ihrer buttonToggle Funktion:

function buttonToggle(where, pval, nval) {
    var table = document.getElementById(where.attributes.rel.value);
    where.value = (where.value == pval) ? nval : pval;
    table.style.display = (table.style.display == 'block') ? 'none' : 'block';
}

Siehe Beispiel.

InformationsquelleAutor mVChr

Etwas wie:

function buttonToggle(where,pval,nval) {
    var display =  where.value === nval ? 'none' : 'block'; //or 'table'
    document.getElementById('yourTableId').style.display = display;
    where.value = (where.value == pval) ? nval : pval;
}

Oder besser:

function buttonToggle(source, target, show_val, hide_val) {
    var display =  source.value === hide_val ? 'none' : 'block'; //or 'table'
    target.style.display = display;
    source.value = (source.value == show_val) ? hide_val : show_val;
}

und anstelle der Zugabe Ihre click-handler inline-JavaScript verwendet:

document.getElementById('nextbt').onclick = (function() {
    var table = document.getElementById('yourTableId');
    return function() {
        toggleButton(this, table, 'View', 'Hide');
    };
}());

InformationsquelleAutor Felix Kling

0

Werden Sie wollen, ändern Sie die div ' s style.visible zu visible oder hidden, und/oder legen Sie die style.display zu block oder none.

Finden Sie unter: http://w3schools.com/css/css_display_visibility.asp
- Sollte nicht die display - Eigenschaft festgelegt werden, um table statt block da es ein Tisch?
- Die display Eigenschaft befasst sich mit, wie das div-Element gerendert, und es kümmert sich nicht, was darin enthalten ist. display kann eingestellt werden, um block, inline oder none. Es gibt keine table.
- Es gibt: developer.mozilla.org/en/CSS/display, Aber ich glaube nicht, dass es einen großen Unterschied macht.
- Ah, ich dachte er war das ändern der Tabelle und nicht die übergeordnete div. Ich glaube, ich verpasst, wo Sie sagte div zu. Ich werde herausfinden, das Lesen, was man dieser Tage.
InformationsquelleAutor David R Tribble

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.