先生，
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slide demo</title>
<style>
.leftpanel1 {
width: 300px;
height: 100px;
background: #ccc;
position:absolute;
float:left;
z-index:100;
top:0;
background:red;
}
.rightpanel1 {
width: 695px;
height: 100px;
background: #ccc;
position:absolute;
float:right;z-index:100;top:0;background:red;right:0;
}
.leftpanel2 {
width: 300px;
height: 100px;
background: #ccc;
position:absolute;
float:left;
z-index:10;top:0;background:green;
}
.rightpanel2 {
width: 695px;
height: 100px;
background: #ccc;
position:absolute;
float:right;z-index:10;top:0;background:green;right:0;
}
.leftpanel3 {
width: 300px;
height: 100px;
background: #ccc;
position:absolute;
float:left;
z-index:1;top:0;background:#ececec;
}
.rightpanel3 {
width: 695px;
height: 100px;
background: #ccc;
position:absolute;
float:right;z-index:1;top:0;background:#ececec;
right:0;
}
#container{position:absolute;margin:0 auto; width:1000px;height:300px;border:solid 1px red;left:0;right:0;bottom:0;top:100px;}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<p>Click anywhere to toggle the box.</p>
<a href="#" id="tog1">switch 1,2</a>
<a href="#" id="tog2">switch 3,4</a>
<a href="#" id="tog3">switch 4,5</a>
<div id="container">
<div id="toggle1" class="leftpanel1">for switch 1</div><div id="toggle2" class="rightpanel1">for switch 2</div>
<div id="toggle3" class="leftpanel2">for switch 2</div><div id="toggle4" class="rightpanel2">for switch 3</div>
<div id="toggle5" class="leftpanel3">for switch 3</div><div id="toggle6" class="rightpanel3">for switch 4</div>
</div>
<script>
$(window).load(function(){
$().ready = function() {
$("#tog1").click(function() {
$( "#toggle1" ).toggle("slide", { direction: "left" });
$( "#toggle2" ).toggle("slide", { direction: "right" });
});
$("#tog2").click(function() {
$( "#toggle3" ).toggle("slide", { direction: "left" });
$( "#toggle4" ).toggle("slide", { direction: "right" });
});
$("#tog3").click(function() {
$( "#toggle5" ).toggle("slide", { direction: "left" });
$( "#toggle6" ).toggle("slide", { direction: "right" });
});
}();
});
</script>
</body>
</html>在上面的代码中，我试图在点击每个开关时滑动 2 个 div。有 3 个开关，每个开关都有 2 个滑动 div。
默认情况下，switch 1,2 应该激活，toggle1 & toggle2 应该滑入。当点击 switch 3 时,4，开关 1,2 变为非事件状态，它们的两个 div 应该滑出并且 toggle3 和 toggle4 应该滑入。如果点击 开关 5， 6 然后之前的 div 滑出，toggle5 和 toggle6 应该滑入。
希望你应该做一些必要的....
最佳答案
不确定这是否是您所需要的。
这适用于两个(或更多)div - 一个带有 slider (滚动 - 主)和一个没有 slider (从)
//the simultaneous movement of sliders
$("#master").scroll(function(){//the one you scroll
sliderPos = $("#master").position(); // get the position
$("#slave").animate({left:sliderPos.left,},0); // animate the second div
});
关于jquery - 单击时左右同时滑动两个div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32516219/