jquery,显示/隐藏div,问题标签
我想知道是否有人可以帮忙。
基于点击复选框及其标签,我在显示/隐藏div方面遇到了一些困难。
如果我有与复选框的id一起的标签,它将调用jquery两次,它显示并隐藏我希望显示或隐藏的div(取决于当前状态)
JS / Jquery在这里:
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".cancel_body").hide();
//toggle the componenet with class msg_body
$(".cancel_head").click(function()
{
console.log('tewrststeg');
$(this).next(".cancel_body").slideToggle(600);
});
});
</script>
选项1:
<div class="cancel_head"><input type="checkbox" name="reason" value="1" id="label_id"><label for="label_id">Unknown Issues</label></div>
<div class="cancel_body" style="display: none;">
<ul>
<li><a href="#">Solution 1 here</a></li>
<li><a href="#">Solution 2 here</a></li>
<li><a href="#">Solution 3 here</a></li>
</ul>
</div>
上述问题是它显示并隐藏了有问题的div。 或隐藏然后显示。 取决于当前可用的。
选项2:
<div class="cancel_head"><input type="checkbox" name="reason" value="1">Unknown Issues</div>
<div class="cancel_body" style="display:none;">
<ul>
<li><a href="#">Solution 1 here</a></li>
<li><a href="#">Solution 2 here</a></li>
<li><a href="#">Solution 3 here</a></li>
</ul>
</div>
上面的问题是,虽然文本是可点击的,并与jQuery的功能。 如果您点击文字,我无法勾选或取消选中复选框。
我会检查复选框元素状态的变化,而不是尝试单击div时执行操作:
$('input[type=checkbox]').change(function () {
if ($(this).attr("checked")) {
return;
}
});
标签应该有'for'属性指向它应该控制的复选框的ID。
标签
链接地址: http://www.djcxy.com/p/55793.html