此代码基本上显示了隐藏的divs以便向上滑动我只是不希望它们在单击任何此按钮时彼此重叠我想要任何以前向上滑动的div。如果你还可以缩短我的jquery代码，我将非常感激。
<html>
<title></title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function( $ )
{
// Get a reference to the container.
var container1 = $( "#content1" );
// Bind the link to toggle the slide.
$( ".button1" )
.click(
function( event ){
// Prevent the default event.
event.preventDefault();
// Toggle the slide based on its current
// visibility.
if (container1.is( ":visible" )){
// Hide - slide up.
container1.slideUp( 500 );
}
else {
// Show - slide down.
container1.slideDown( 500 );
}
}
);
// Get a reference to the container.
var container2 = $( "#content2" );
// Bind the link to toggle the slide.
$( ".button2" )
.click(
function( event ){
// Prevent the default event.
event.preventDefault();
// Toggle the slide based on its current
// visibility.
if (container2.is( ":visible" )){
// Hide - slide up.
container2.slideUp( 500 );
}
else {
// Show - slide down.
container2.slideDown( 500 );
}
}
);
var container3 = $( "#content3" );
// Bind the link to toggle the slide.
$( ".button3" )
.click(
function( event ){
// Prevent the default event.
event.preventDefault();
// Toggle the slide based on its current
// visibility.
if (container3.is( ":visible" )){
// Hide - slide up.
container3.slideUp( 500 );
}
else {
// Show - slide down.
container3.slideDown( 500 );
}
}
);
var container4 = $( "#content4" );
// Bind the link to toggle the slide.
$( ".button4" )
.click(
function( event ){
// Prevent the default event.
event.preventDefault();
// Toggle the slide based on its current
// visibility.
if (container4.is( ":visible" )){
// Hide - slide up.
container4.slideUp( 500 );
}
else {
// Show - slide down.
container4.slideDown( 500 );
}
}
);
}
);
</script>
</head>
<body>
<style type="text/css">
#content1
{
height: 500px;
width: 300px;
border-width: 1px;
border-style: solid;
bottom: 0px;
position: fixed;
display: none;
color: red;
}
#content2
{
height: 500px;
width: 300px;
border-width: 1px;
border-style: solid;
bottom: 0px;
position: fixed;
display: none;
color: blue;
}
#content3
{
height: 500px;
width: 300px;
border-width: 1px;
border-style: solid;
bottom: 0px;
position: fixed;
display: none;
color: brown;
}
#content4
{
height: 500px;
width: 300px;
border-width: 1px;
border-style: solid;
bottom: 0px;
position: fixed;
display: none;
color: green;
}
</style>
<div id="wrapper">
<input type="button" class="button1"></input>
<input type="button" class="button2"></input>
<input type="button" class="button3"></input>
<input type="button" class="button4"></input>
<div id="content1">
First div
</div>
<div id="content2">
second div
</div>
<div id="content3">
Third div
</div>
<div id="content4">
Fourth div
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
很难确切知道你需要什么，但你可以使用jQuery slideUp()和slideDown()回调函数告诉你动画何时完成：
$('#containerz').slideUp('slow', function() {
$('#containers').slideDown('slow');
});
参见示例here。希望它有所帮助。
如果您正在寻找同时发生的动画，可以试试这个：
$(".button1").click(function(event) {
$('#containerz').slideUp('slow');
$('#containers').slideDown('slow');
});
$(".button2").click(function(event) {
$('#containers').slideUp('slow');
$('#containerz').slideDown('slow');
});
参见示例here。
扩展回答：
请参阅新演示here。
您的示例中有一些重复的代码，因此我通过将重复的代码拆分为单独的函数来重构它：
function showContent(container) {
if (container.is(":visible")) {
// Hide - slide up.
container.slideUp(500);
} else {
// Show - slide down.
container.slideDown(500);
}
}
我还添加了hideContent功能，可根据需要隐藏任何内容divs：
function hideContent(div1, div2, div3) {
div1.slideUp(500);
div2.slideUp(500);
div3.slideUp(500);
}
我还重构了你的CSS，因为有一些重复。所以我在您的内容class中添加了内容divs：
<div id="content1" class="content">First div</div>
并将content类添加到CSS中。因此，如果您需要对此CSS进行更改，则只需在一个位置而不是每个内容divs进行更改：
.content {
height: 500px;
width: 300px;
border-width: 1px;
border-style: solid;
bottom: 0px;
position: fixed;
display: none;
}
我添加了一个新功能，可以在点击时启用/禁用按钮：
function setButtons(inactiveBtn) {
$('.button').prop('disabled', false);
inactiveBtn.prop('disabled', true);
}
新演示here。
答案 1 :(得分：0)
尝试一下：
jQuery(function($) {
$('[class^=button]').on('click', function(e) {
// prevent default behavior
e.preventDefault();
// retrieving button number
var buttonNb = $(this).attr('class').substr($(this).attr('class').length - 1); // assuming the button has only one class which is 'button*' (where * is either 1 or 2)
// assigning variables
if(buttonNb == 1) {
var $contUp = $('#containerz');
var $contDown = $('#containers');
} else if(buttonNb == 2) {
var $contUp = $('#containers');
var $contDown = $('#containerz');
}
// do the job
if($contUp.is(':visible')) {
$contUp.slideUp(500, function() {
$contDown.slideDown(500);
});
} else {
$contDown.slideDown(500, function() {
$contUp.slideUp(500);
});
});
});
答案 2 :(得分：0)
我认为你正在寻找这个
工作小提琴，
http://jsfiddle.net/gwe81ka0/1/
代码1：
var containerz = $("#containerz");
var containers = $("#containers");
$( "#button1" ).click(function(){
if (containerz.is( ":visible" )){
containerz.slideUp( "slow",function(){
if (containers.is( ":hidden" )){
containers.slideDown( "slow" );
}
}
);
}
// if (containers.is( ":hidden" )){
// containers.slideDown( "slow" );
// }
}
);
$( "#button2" ).click(function(){
if (containers.is( ":visible" )){
containers.slideUp("slow",function(){
if (containerz.is( ":hidden" )){
containerz.slideDown("slow");
}
}
);
}
// if (containerz.is( ":hidden" )){
// containerz.slideDown("slow");
// }
}
);
代码2：
var containerz = $("#containerz");
var containers = $("#containers");
$( "#button1" ).click(function(){
if (containers.is( ":hidden" )){
containers.css('z-index',99);
containerz.css('z-index',98);
containers.slideDown( "slow",function(){
if (containerz.is( ":visible" )){
containerz.slideUp( "slow" );
}
}
);
}
}
);
$( "#button2" ).click(function(){
if (containerz.is( ":hidden" )){
containerz.css('z-index',99);
containers.css('z-index',98);
containerz.slideDown( "slow",function(){
if (containers.is( ":visible" )){
containers.slideUp( "slow" );
}
}
);
}
}
);