我是jQuery的新手。如果单击它,我有一个a.acessaPonto,添加/删除类a.acessaPonto.Selected并显示/隐藏div.AcessaPontoAtendimento。我有这样的代码。在Firefox和IE中效果很好,但在Chrome中不起作用。
$( document ).ready(function() {
$('.acessaPonto').click(function() {
$(this).toggleClass('Selected');
if ($(this).hasClass('Selected'))
$('.AcessaPontoAtendimento').css("display", "inline-block");
else
$('.AcessaPontoAtendimento').css('display', 'none');
});
});
.acessaPonto{
background-color:blue;
}
.acessaPonto.Selected{
background-color:red;
}
.AcessaPontoAtendimento{
display:none;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="#" class="acessaPonto">Click</a>
<div class="AcessaPontoAtendimento">
<p>Lorem ipsum dolor color</p>
</div>
</body>
</html>
有人知道我的代码有什么问题?
最佳答案
$('.acessaPonto').click(function (e) {
e.preventDefault();
$(this).toggleClass('Selected');
$('.AcessaPontoAtendimento').toggle( $(this).hasClass('Selected') );
});
如果您的
.acessaPonto
位于a
标记上,则需要e.preventDefault()
,否则不需要。