Einblenden/ausblenden eines div mit jquery mehrere Male

Ich bin zu wollen, um jquery verwenden zu tun, ein - /ausblenden eines DIV-aus einem text-link.

Was macht es ein wenig anders als die Beispiele, die ich gefunden habe, der diese Seite so weit ist, brauche ich eine generische Art und Weise zu tun, die es mehrfach auf Seite 1 und auch in der Lage, es zu benutzen für die gesamte site auf anypage.

Es wäre wirklich schön, wenn ich das JS in einer separaten Datei enthalten, die in die Seiten, so vielleicht es sein kann, eingewickelt in eine Funktion?

Kann mir hier jemand helfen? Für die es generische, könnte es sein, wo ich zuweisen eine div, die gezeigt/versteckt mit einer id wie id="toggle-hide-1" und ändern Sie einfach die zahlen in meine Seite zu machen, eine andere show/hide-Bereich

Könnte ich einfach die ID mit einem Namen, wird die Funktion anzeigen/ausblenden eines div-und Sie zu trennen von anderen divs, das ein - /ausblenden auf einer Seite konnte ich eine Nummer hinzuzufügen, um es.

unten ist teilweise code, der nicht eine ein - /ausblenden eines div auf einen link klicken aber ist nicht genau das was ich brauche.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" >
$(function() { 
    $(".view-code").click(function(evt) {
        $(".tool_block, .view-code").toggle();
    }); 
});
</script>
<a href="#" class="view-code" >view code</a>
<a href="#" class="view-code"  style="display:none">hide code</a> <br  />

<div class="tool_block" style="display:none" >
this stuff is hidden until we choose to show it!
</div>

InformationsquelleAutor JasonDavis | 2009-09-05

3

Der beste Ansatz ist wahrscheinlich etwas mit Hilfe von benutzerdefinierten Attributen. Wenn Sie markup-Ihren Anker mit einem Attribut, das angibt, die jquery dem div zu wechseln, wird es leichter sein, um generischen code schreiben, um die Arbeit zu tun.

Etwas wie dieses:
```
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" >
$(function() { 
    $(".view-code").click(function(evt) {
        var d = $(this).attr("toolDiv");
        $(".tool_block[toolDiv=" + d + "], .view-code[toolDiv=" + d + "]").toggle();
    }); 
});
</script>
<a href="#" class="view-code" toolDiv="1" >view code</a>
<a href="#" class="view-code" toolDiv="1" style="display:none">hide code</a> <br  />

<div class="tool_block" toolDiv="1" style="display:none" >
this stuff is hidden until we choose to show it!
</div>
```
Dann geben Sie jedem Ihrer Anker-div Paaren eine einzigartige toolDiv Wert (nicht als Zahl).
- das ist genau das, was ich brauche! 1, was ist, wenn Sie auf einen link klicken, lädt er die # in der URL, wissen Sie, wie Sie Abbrechen aus, das Teil, weil es macht die Seite gehen bis ganz nach oben wenn Sie nach unten gescrollt alle. Dank
- Eine andere Sache, wissen Sie, wenn es möglich wäre, wickeln Sie diese in eine Funktion, die ich setzen konnte entfernt in einer Datei, die dann an anderer Stelle und nennen es einfach mit einem 1-liner auf der Seite habe ich es brauche?
- Kleben Sie den Inhalt der script-block in eine andere Datei, und solange es geladen wird, nach der jquery-Bibliothek, es funktioniert gut für jede Seite. Keine Notwendigkeit zu schreiben JS auf der Seite direkt. Um zu verhindern, dass das default-Verhalten der Anker, fügen Sie einfach return false; am Ende der click-handler.
InformationsquelleAutor Joel
1

Wenn könnten Sie wickeln die gesamte Sammlung in einem div, dass es ziemlich einfach.
```
$(function() {
    $(".view-code").click( function(e) {
        $(this).siblings().andSelf().toggle();
    });
});

<div>
    <a href="#" class="view-code" >view code</a>
    <a href="#" class="view-code"  style="display:none">hide code</a> <br  />

    <div class="tool_block" style="display:none" >
    this stuff is hidden until we choose to show it!
    </div>
</div>
```
Wenn es nicht handhaben die <br /> man könnte filter die Geschwister nur div-und anchor-Elemente.
- Dies erfordert, dass die Anker und divs etwas im Zusammenhang in der markup obwohl.
- Nur, dass Sie in den selben container, aber es klingt wie das ist, was er nach.
- Ich denke, das ist eine elegante Lösung, wenn die Annahme, die Sie gemacht haben, wahr ist für die OP.
- Problem ist nur, es wird nicht lassen Sie mich haben mehrere sets. Dies würde es ermöglichen 1-Klick-Ereignis für mehrere divs aber nicht mehrere Sätze von click-Ereignisse zu verändern, unterschiedliche div 's wie Joel Potter' s Antwort
- Ich bin mir nicht sicher, was du meinst. Dies würde anwenden eine Prozedur auf jedes element (in diesem Fall Anker) dekoriert mit der "view code" - Klasse. Jeder click-handler soll nur auf die Elemente im container mit dem element, das den handler angewendet wird. Man könnte so viele Sätze von Anker/Anker/div Tupeln, wie Sie wollten, solange Sie sich, eingewickelt in ein div, so dass Sie konnte die Geschwister () - Methode auf, wählen Sie nur diejenigen divs und Anker assoziiert mit dem element geklickt wurde.
InformationsquelleAutor tvanfosson
0

Warum nicht bestimmte Klassen statt? Jedes element, das Sie möchten angezeigt/ausgeblendet haben, können Sie eine Klasse namens "toggler", wie in:
```
<div class="toggler">
 ...
</div>
```
Können Sie dann schalten Sie die Sichtbarkeit ALLER Elemente mit dieser Klasse auf einmal mit:
```
$(".toggler").toggle();
```
In diesem Szenario, es macht keinen Unterschied, wo im Dokument sich diese Elemente befinden, oder auch, welche Art von Elementen sind.

Wenn diese Funktionalität benötigt werden, Global verfügbar sind, Sie können immer erweitern jQuery selbst ist eine benutzerdefinierte Funktion, in:
```
$.toggleTogglers = function(toggleClass) {
  $("." + toggleClass).toggle();
};
```
Das ist schön, Sie haben die Flexibilität, wählen Sie eine toggle-custom-Klasse von Ihrem eigenen design.

InformationsquelleAutor David Andres

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.