1
Ich habe meine jQuery slidetoggle und es funktioniert für die erste <div>, aber wenn Sie weitere Flip-und Panel's hinzufügen, wird es nicht funktionieren. Es muss wie this sein. Ich klicke auf das obige und es funktioniert. Der zweite reagiert nicht einmal. Wie repariere ich das?Wie benutze ich mein jQuery-Slidogogle mehr als einmal?
Der vollständige Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
$(document).ready(function(){
$("#flip1").click(function(){
$("#panel1").slideToggle("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
#panel1, #flip1 {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel1 {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
<br><br>
<h1 style="text-align: center;">This example below won't work. Why not?</h1><br> <br>
<div id="flip">Click to slide the seconds panel down or up</div>
<div id="panel">Hello world!</div>
<br><br>
<h1 style="text-align: center;">To fix this I could try using different names for the flip and panel such as flip1 and panel1</h1><br><br>
<div id="flip1">Click to slide the panel down or up</div>
<div id="panel1">Hello world!</div>
</body>
</html>
ID eines Elements verwenden muss eindeutig sein, verwenden Klassen statt, dann im Click-Handler müssen Sie das nächste Geschwisterelement umschalten –