wie man eine ein - /ausblenden toggle-button mit jquery

Hallo, ich habe versucht, machen eine show/hide toggle-button mit jquery-aber ich kann nur die buttons finden, die zeigen, dass ein div, aber keine, die sich verstecken

unten ist eines der Beispiele, die ich gefunden, die zeigt, dass ein div, aber es lässt Sie nicht verstecken, es sei denn, Sie klicken auf eine andere Schaltfläche. Ich möchte in der Lage sein, verwenden Sie die gleiche Taste zum ein-und ausblenden eines div. Ich habe mehrere divs auf meiner Seite, und würde gerne in der Lage sein zu verwenden, stattdessen jquery javascript.

<html>
 <head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document).ready(function(){

        $(".buttons").click(function () {
        var divname= this.value;
          $("#"+divname).show("slow").siblings().hide("slow");
        });

      });
</script> 
     </head>
        <body>


 <div id="buttonsDiv"> 

  <input type="button" id="button1" class="buttons" value="div1"></input>
  <input type="button" id="button2" class="buttons" value="div2"></input>
  <input type="button" id="button3" class="buttons" value="div3"></input>
  <input type="button" id="button4" class="buttons" value="div4"></input>

  </div>

   <div>

     <div id="div1" style="display:none">
    Hello World
     </div>

     <div id="div2" style="display:none">
       Test
   </div>

        <div id="div3" style="display:none">
          Another Test
  </div>

     <div id="div4" style="display:none">
     Final Test
     </div>


         </div>


     </body>
    </html>

jQuery IST javascript!
Ich schrieb tutorial auf How to create JQuery-plugin zum konvertieren von radio-buttons in Tasten und Hier sehen Sie demo

InformationsquelleAutor billy | 2011-08-17

5

Versuchen, diese
```
$(".buttons").click(function () {
  var divname= this.value;
  $("#"+divname).slideToggle().siblings().hide("slow");
});
```
vielen Dank, dass ist das, was ich suchte
kool, dann markieren Sie es als Antwort, wenn Sie können, danke.

InformationsquelleAutor ShankarSangoli
4

Sogar einfacher, die Kontrolle des eigenen toggle-Funktion.
```
$('.toggleButtons').click(function()
{
    $('control1, control2, ...').toggle();
});
```
Bereich? Was ist das?
was auch immer Bereich, den Sie versuchen zu verstecken/zeigen
würde ich eine toggle-Methode für jede Taste? da die div-name gesteuert wird, wäre das anders
für jede Schaltfläche ja, ich denke schon, aber wenn Sie möchten mehrere Bereiche, um versteckt werden,/dargestellt durch eine einzige Taste, dann trennen, dann mit Komma-code aktualisiert.

InformationsquelleAutor atoMerz

Demo

$(document).ready(function(){
    $(".buttons").click(function () {
    var div= $("#"+this.value);
          div.toggle("slow").siblings().hide("slow");
    });
});

Das sollte es tun.

EDIT:

Kredit für das Umschalten geht an @AtoMerZ. Er hatte es zuerst.

InformationsquelleAutor Joseph Marikle

1

Schalten Sie Ihr Skript mit diesem:
```
<script>
    $(document).ready(function(){
        $(".buttons").click(function () {
           $("#buttonsDiv div").hide()
          var divname= this.value;
          $("#"+divname).show();
        });
    });
</script> 
```
Die toggle() sollte nicht angewendet werden um die $(this), sondern auf das div-bezogen auf die Schaltfläche.
Mein Fehler... korrigiert...
danke, aber es funktioniert nicht
Was ist $("#buttonsDiv").child() geben?
Mein Fehler, wieder einmal habe ich korrigiert...

InformationsquelleAutor Nayish

Ist ein ziemlich einfaches Skript machen:

$('.buttons').click(function()
{
    var elementToShowOrHide = $('#' + $(this).val());

    if(elementToShowOrHide.is(':visible'))
       elementToShowOrHide.hide();
    else
       elementToShowOrHide.show();
});

Jedem Klick auf die Taste, dann schaltet die Sichtbarkeit der anderen Elemente.

überprüfen Sie heraus .toggle() würde den code vereinfachen, eine Menge.

InformationsquelleAutor Tejs

0

Den jQuery .toggle () - Methode sollte Ihnen dabei helfen:
```
$(".buttons").click(function () {
  var divname= this.value;
  $("#"+divname).toggle();
});
```
Quelle: http://api.jquery.com/toggle/

InformationsquelleAutor red
0

Können Sie die toggle Methode zum ein-und ausblenden eines Elements. Diese zeigen/verbergen jedes div einzeln:
```
$(".buttons").click(function () {
  $("#" + this.value).toggle("slow");
});
```
InformationsquelleAutor Guffa
0

Unter der Annahme, dass Sie möchten, dass alle anderen divs werden ausgeblendet, wenn die neue wird angezeigt:
```
$('.buttons').click(
    function() {
        $('div > div').hide();
        $('div > div').eq($(this).index()).show();
    });
```
JS Fiddle demo.

InformationsquelleAutor David Thomas

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.