我目前正在使用下面的方法来切换多个div，但我想知道是否可以将所有这些组合成一个？
<script type="text/javascript">
$(document).ready(function() {
$("#tvehicle").click(function() {
$("#div7").toggle();
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#tvehicle2").click(function() {
$("#vehicle2").toggle();
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#tproperty").click(function() {
$("#div8").toggle();
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#thproperty1").click(function() {
$("#hproperty1").toggle();
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#thproperty2").click(function() {
$("#hproperty2").toggle();
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#thproperty3").click(function() {
$("#hproperty3").toggle();
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#tvehicle").click(function(){
$("#div7").toggle();
});
$("#tvehicle2").click(function(){
$("#vehicle2").toggle();
});
//AND SO ON...
});
</script>
您可以将所有函数放在一个文档中。ready函数。如上所述：）。。。此外，您不必为每个函数都有新的<script>标记。
向所有div添加一个类，例如：
<div id="tvehicle2" class="toggleable"> ... </div>
那么你可以做：
$(".toggleable").click(function () {
$(this).toggle();
});
如果您不想（或不能）将类添加到所有可切换项中，您也可以在选择器中组合多个id引用：
$('#tvehicle1, #tvehicle2, #tv3').click(function () {
$(this).toggle();
});
您可以使用数据属性来指定要切换的元素。示例
$(document).ready(function(){
var toggler = function() {
var toToggle = $(this).data().toggleId; //Id of an element to toggle
$("#" + toToggle).toggle();
};
$(".togglers").on("click", ".toggler", toggler);
});
HTML结构
<div class="togglers">
<div class="toggler" data-toggle-id="to-toggle-1">Click to toggle 1</div>
<div class="to-toggle" id="to-toggle-1">I will be toggled #1</div>
<div class="toggler" data-toggle-id="to-toggle-2">Click to toggle 2</div>
<div class="to-toggle" id="to-toggle-2">I will be toggled #2</div>
<div class="toggler" data-toggle-id="to-toggle-3">Click to toggle 3</div>
<div class="to-toggle" id="to-toggle-3">I will be toggled #3</div>
</div>