Question

我是jQuery的新手。如果我点击它，添加/删除类 a.acessaPonto.Selected 并显示/隐藏 div.AcessaPontoAtendimento ，我有 a.acessaPonto 。我有这样的代码。在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>

有人知道我的代码中存在什么问题？

Answer 1

$('.acessaPonto').click(function (e) {
    e.preventDefault();
    $(this).toggleClass('Selected');
    $('.AcessaPontoAtendimento').toggle( $(this).hasClass('Selected') );
});

如果您的.acessaPonto位于a标记上，则需要e.preventDefault()，否则不需要。{/ p>

Answer 2

代码运行正常。真正的问题在于我的Chrome。我杀了app并再次重新打开，代码工作！

但我希望在应用程序中使用旧代码可以更好地使用某些部分。

$('.acessaPonto').click(function() {
    $(this).toggleClass('Selected');
    if ($(this).hasClass('Selected'))
    $('.AcessaPontoAtendimento').removeClass('hide'); // maybe you prefer .show();
    else
    $('.AcessaPontoAtendimento').addClass('hide'); // maybe you prefer .hide();
});

Tnx全力支持。

jQuery show / hide div不适用于Chrome

2 个答案: