我写了一个简单的JavaScript,在点击另一个<div>
后显示隐藏的<div>
。一切正常但是当点击<div>
中的复选框时,隐藏的一个会出现并立即隐藏。
$(document).ready(function() {
$('#click1').click(function() {
if ($('#hidden1').is(':hidden')) {
$('#hidden1').show(500);
} else {
$('#hidden1').hide(500);
}
});
});
&#13;
.divCell {
width: 500px;
height: 35px;
margin: 2px 0;
display: inline-block;
background-color: #D4F78F;
}
.checkbox_div {
width: 25px;
position: relative;
margin: 5px;
float: left;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label {
width: 25px;
height: 25px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background-color: white;
border-radius: 4px;
}
.div_name_divcell {
line-height: 35px;
width: auto;
float: left;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="divCell" id="click1">
<div class="checkbox_div">
<input type="checkbox" id="checkbox1">
<label for="checkbox1"><span></span>
</label>
</div>
<div class="div_name_divcell">Name1</div>
</div>
<div id="hidden1" style="display: none;">
hidden text
</div>
&#13;
答案 0 :(得分:3)
将event.preventdefault
添加到您的代码
$(document).ready(function() {
$('#click1').click(function(event) {
event.preventDefault();
if ($('#hidden1').is(':hidden')) {
$('#hidden1').show(500);
} else {
$('#hidden1').hide(500);
}
});
});
答案 1 :(得分:0)
您只能使用 return false;
$(document).ready(function() {
$('#click1').click(function() {
if ($('#hidden1').is(':hidden')) {
$('#hidden1').show(500);
} else {
$('#hidden1').hide(500);
}
return false;
});
});