我正在尝试学习 jQuery，但我不知道如何使一个 div 与其他 div 分开向下滑动，而不为每个 div 制作单独的脚本。每当我尝试将其放入一个脚本中时，div 都会同时执行同一张幻灯片。
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<script>
$(document).ready(function(){
$("#flip1").click(function(){
$("#panel1").Toggle("slow");
});
});
</script>
<script>
$(document).ready(function(){
$("#flip2").click(function(){
$("#pane2").Toggle("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
}
</style>
</head>
<body>
<div id="flip">Click to slide up panel</div>
<div id="panel">Hello world!</div>
<div id="flip1">Click to slide up panel</div>
<div id="panel1">Hello world!</div>
<div id="flip2">Click to slide up panel</div>
<div id="pane2">Hello world!</div>
</body>
感谢您的帮助。
最佳答案
尝试使用this回调中的值。首先，更改您的 id="flip#"至class="flip"和id="panel#"至class="panel" 。然后:
$(document).ready(function(){
$(".flip").click(function(){
$(this).next('.panel').slideUp("slow");
});
});
这将获取单击元素的 next sibling ，然后将其向上滑动。
关于javascript - 有什么办法可以组合这些脚本吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40362879/