我试图在按钮1的第二次单击时隐藏div。当我在第一次单击时单击按钮1时，它显示div，在第二次单击时它隐藏div。问题是，当我点击按钮1，然后点击按钮2，突然我再次点击按钮1，它隐藏了div。当我点击按钮2时仍然记录按钮1的第一次点击。我想重置按钮1的点击次数，这样当我点击按钮2，然后点击按钮1时，div不会隐藏。请帮助抱歉我的英语
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<style type="text/css">
.space{
border: 1px solid red;
width: 400px;
margin-left: -420px;
transition: 0.5s ease;
}
.show{
margin-left: 0;
}
.display{
display: none;
}
</style>
<body>
<div class="container-fluid">
<div class="buttons">
<div class="row">
<div class="col-md-3">
<button class="btn btn-primary" id="btn"><i class="fa fa-bars"></i></button>
<button class="btn btn-danger" id="btn2"><i class="fa fa-bars"></i></button>
</div>
</div>
</div>
<div class="space">
<div class="row">
<div class="col-md-9 divpage" id="div">
<h1>This is Div 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-md-9 divpage2" id="div2">
<h1>This is Div 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#btn').click(function(){
var clicks = $(this).data('clicks');
if (clicks) {
$('.space').removeClass('show');
} else {
$('.space').addClass('show');
$('#div2').addClass('display');
$('#div').removeClass('display');
}
$(this).data("clicks", !clicks);
});
$('#btn2').click(function(){
$('.space').addClass('show');
$('#div').addClass('display');
$('#div2').removeClass('display');
});
$(document).mouseup(function (e)
{
var container = $('.space');
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.removeClass('show');
}
});
});
</script>
</body>
</html>
答案 0 :(得分：2)
$('#btn').click(function()
{
var divatr=$('#div2').attr('check');
if(divatr=='unchecked')
{
$('#div2').attr('check','checked');
$('#div2').show();
}
else
{
$('#div2').attr('check','unchecked');
$('#div2').hide();
}
});
<div class="col-md-9 divpage2" id="div2" check="unchecked" style="display:none;">
<h1>This is Div 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
答案 1 :(得分：0)
这里是更新的jquery
<script>
$(document).ready(function(){
$('#btn').click(function(){
var divatr = $('#div').attr('check');
var divatr2 = $('#div2').attr('check');
if(divatr == 'unchecked')
{
$('#div').attr('check','checked');
$('#div2').attr('check','unchecked');
$('.space').addClass('show');
$('.divpage').show();
$('.divpage2').hide();
}else{
$('#div').attr('check','unchecked');
$('.space').removeClass('show');
}
});
$('#btn2').click(function(){
var divatr = $('#div').attr('check');
var divatr2 = $('#div2').attr('check');
if(divatr2 == 'unchecked')
{
$('#div2').attr('check','checked');
$('#div').attr('check','unchecked');
$('.space').addClass('show');
$('.divpage').hide();
$('.divpage2').show();
}else{
$('#div2').attr('check','unchecked');
$('.space').removeClass('show');
}
});
$(document).mouseup(function (e)
{
var container = $('.space');
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.removeClass('show');
}
});
});
</script>