JQuery Slide nach oben/nach oben - Zeigt nur ein Div aus demselben Klassennamen an

Question

Ich habe eine UL-Liste erstellt, jede LI hat zwei DIVs - eine sichtbare Fragen-Registerkarte und eine versteckte Antwort-Registerkarte. Es gibt eine Schaltfläche auf der rechten Seite der Registerkarten (Frage-Registerkarte hat SlideDown-Schaltfläche, Antwort-Registerkarte hat die Schaltfläche "SlideUp"). Aber sobald ich auf diese Schaltflächen klicke, werden alle DIVs in der gesamten UL-Liste angezeigt. Wie kann ich nur den angeklickten Inhalt anzeigen und die restlichen DIVs verbergen?

HTML sieht wie folgt:

<ul> 
    <li> 
    <div class="questionTab" id="firstTab">What is the natural color for Dory? 
     <span class="slideDownButton" style="background-color: red">SLIDEDOWN</span> 
    </div> 
    <div class="answerTab">Answer: It's blue. 
     <span class="slideUpButton" style="background-color: red">SLIDEUP</span> 
    </div> 
    </li> 
</ul> 

für diesen Beitrag, ich allgemeine Layout wie Polsterungen, Ränder, Farben usw.

.answerTab { 
    display: none; 
    } 

Und JQuery-Skript folgt aussieht wie die ausgeschlossen wird derzeit offen Alle Registerkarten in UL:

$(document).ready(function(){ 
     $(".slideDownButton").click(function(){ 
      $(".answerTab").slideDown("slow"); 
     }); 
    }); 
    $(document).ready(function(){ 
     $(".slideUpButton").click(function(){ 
      $(".answerTab").slideUp("slow"); 
     }); 
    }); 

Allerdings, basierend auf einigen Untersuchungen hatten einige Leute s Ich habe versucht, folgende Änderungen vorzunehmen, um nur das angeklickte DIV anzuzeigen, so dass es schließlich so aussieht, aber es funktioniert nicht.

$(document).ready(function(){ 
     $(".slideDownButton").click(function(){ 
      $(this).parent("li").find(".answerTab").slideDown("slow"); 
     }); 
    }); 
    $(document).ready(function(){ 
     $(".slideUpButton").click(function(){ 
      $(this).parent("li").find(".answerTab").slideUp("slow"); 
     }); 
    }); 

Also ich frage Ihre Hilfe und Beratung. Wie kann ich den folgenden Code verbessern und was mache ich falsch? Alle Hilfe wird geschätzt.

Answer 1

Ihr erster JQuery-Code funktioniert, außer es gibt zwei Fehler.

1. Sie sollten nur einmal am Anfang des Skripts aufrufen. Sie sollten Ihren JQuery-Code mit der $(document).ready-Funktion umbrechen.
2. Sie haben geschrieben: $(",answerTab").slideUp("slow"); - der Klassenname answerTab sollte einen Punkt haben, kein Komma. So sollte es so geschrieben werden: $(".answerTab").slideUp("slow");

Unten ist eine funktionierende Version Ihres Codes. Sie können auch diese CodePen Demo überprüfen. Ich hoffe das hilft.

$(document).ready(function() { 
 
    $(".slideDownButton").click(function() { 
 
    $(".answerTab").slideDown("slow"); 
 
    }); 
 
    $(".slideUpButton").click(function() { 
 
    $(".answerTab").slideUp("slow"); 
 
    }); 
 
});

.answerTab { 
 
    display: none; 
 
}

<ul> 
 
    <li> 
 
    <div class="questionTab" id="firstTab">What is the natural color for Dory? 
 
     <span class="slideDownButton" style="background-color: red">SLIDEDOWN</span> 
 
    </div> 
 
    <div class="answerTab">Answer: It's blue. 
 
     <span class="slideUpButton" style="background-color: red">SLIDEUP</span> 
 
    </div> 
 
    </li> 
 
</ul> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

---

Für mehrere Listeneinträge mit Fragen und Antworten, können Sie den DOM mit den JQuery Methoden durchqueren parent und next wie so:

$(document).ready(function() { 
 
    $(".slideDownButton").click(function() { 
 
    $(this).parent(".questionTab").next(".answerTab").slideDown("slow"); 
 
    }); 
 
    $(".slideUpButton").click(function() { 
 
    $(this).parent(".answerTab").slideUp("slow"); 
 
    }); 
 
});

.answerTab { 
 
    display: none; 
 
} 
 

 
li { 
 
    padding-top: 1rem; 
 
} 
 

 
span { 
 
    background-color: red; 
 
} 
 

 
span:hover { 
 
    cursor: pointer; 
 
    background-color: #E00; 
 
}

<ul> 
 
    <li> 
 
    <div class="questionTab">What is the natural color for Dory? 
 
     <span class="slideDownButton">SLIDEDOWN</span> 
 
    </div> 
 
    <div class="answerTab">Answer: It's blue. 
 
     <span class="slideUpButton">SLIDEUP</span> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class="questionTab">What is the natural color for Woof? 
 
     <span class="slideDownButton">SLIDEDOWN</span> 
 
    </div> 
 
    <div class="answerTab">Answer: It's brown. 
 
     <span class="slideUpButton">SLIDEUP</span> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class="questionTab">What is the natural color for Wolf? 
 
     <span class="slideDownButton">SLIDEDOWN</span> 
 
    </div> 
 
    <div class="answerTab">Answer: It's grey. 
 
     <span class="slideUpButton">SLIDEUP</span> 
 
    </div> 
 
    </li> 
 
</ul> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>